百度地图API官网示例
我写的例子，基于react
实现的功能：
根据点画折线在点位置插入自定义图标点击图标的时候显示一张图片传递的gps坐标需要转换成百度坐标因为坐标转换一次转换不能超过10个，所以需要在处理下数组
父级传递过来的值类似这种结构，经纬度值、点击弹出的图片地址
完整代码（细节就不拆分了，备注都写的比较详细）
import React from 'react';import {message } from 'antd';const BMap = window.BMap;class TrackDetailMap extends ponent{constructor(props){super(props);this.state = {pointList: []}}componentDidMount(){this.showMapLine();}showMapLine = () => {// 百度地图API功能var map = new BMap.Map("allmap"); // 创建Map实例map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放// 个性化地图// map.setMapStyleV2({//styleId: 'c6e1822370488540fb94e00fb86b7b3a'// });// pointList是从父级组件拿到的坐标点，这里根据需要重新组合下if(this.props.pointList.length > 0 && this.props.pointList[0] != null){let pois = []; // 坐标点let imgList = []; // 点击坐标点的时候显示一个图片this.props.pointList.map(item => {return pois.push(new BMap.Point(item.longitude, item.latitude)),imgList.push(item.personImage)})// 初始化地图中心点，这里我是取了点列表的第一个值作为中心点setTimeout(function(){var convertor = new BMap.Convertor();var pointArr = [];pointArr.push(pois[0]);convertor.translate(pointArr, 1, 5, (data) => {if(data.status === 0) {map.centerAndZoom(new BMap.Point(data.points[0].lng ,data.points[0].lat), 16); // 初始化地图,设置中心点坐标和地图级别 }})}, 100);// 百度地图坐标转换一次最多支持10个，需要将数据分割成二维数组形式，我这里写9个一组const num = 9;const times = Math.ceil(pois.length / num)const newArr = []for(let i = 0; i <= times; i++){if(i*num >= pois.length){break}newArr.push(pois.slice(i*num, (i+1)*num))}// 批量转换点setTimeout(function(){var convertor = new BMap.Convertor();newArr.map(item => {// 转换方法convertor.translate(要转换的值arr,1,5,回调函数)convertor.translate(item, 1, 5, (data)=>{// 这里的data是转换后的百度地图坐标if(data.status === 0) {for (var i = 0; i < data.points.length; i++) {// console.log(data.points,'qqqq')// console.log(item,'qqqq')// 创建polyline对象，画折线var polyline =new BMap.Polyline(data.points, {enableEditing: false,//是否启用线编辑，默认为falseenableClicking: true,//是否响应点击事件，默认为truestrokeWeight:'8',//折线的宽度，以像素为单位strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1strokeColor:"#18a45b" //折线颜色});map.addOverlay(polyline);//增加折线// 创建自定义图标点data.points.map((item,index) => {var pt = item;var myIcon = new BMap.Icon(require('../../../../../../public/img/camra.png'), new BMap.Size(32,36));// 点击的弹框内容var sContent =`<img style='margin:4px;width:100%;' id='imgDemo' src=${imgList[index]} width='139' height='104' title='图片' alt='图片加载失败'/>`;var marker = new BMap.Marker(pt,{icon:myIcon}); // 创建标注var infoWindow = new BMap.InfoWindow(sContent); map.addOverlay(marker); // 将标注添加到地图中// 给标注添加点击事件marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);//图片加载完毕重绘infowindowdocument.getElementById('imgDemo').onload = function (){infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏}});})}}})})}, 100);}}render(){return(<div id="allmap" style={{width:'100%',height:'500px'}}></div>)}}export default TrackDetailMap;
data.status状态不等于0，转换失败
解决方法
将拿到的数据拆分，以10个一下为一组，循环转换
一维数组拆分成二维数组
// 百度地图坐标转换一次最多支持10个，需要将数据分割成二维数组形式，我这里写9个一组// pois是拿到的数组 [...] 转换为[[],[],...]const num = 9;const times = Math.ceil(pois.length / num)const newArr = []for(let i = 0; i <= times; i++){if(i*num >= pois.length){break}newArr.push(pois.slice(i*num, (i+1)*num))}
效果图
坐标转换方法：Convertor
translate(points: Array<BMap.Point>, from: number, to: number, callback: function)描述：对指定的点数组进行坐标转换，转换规则为从from到to，转换完成后调用callback，callback的参数为Object 。一次最多10个点。
web服务API: /index.php?title=webapi/guide/changeposition
