我写的例子，基于react
实现的功能：
- 根据点画折线
- 在点位置插入自定义图标
- 点击图标的时候显示一张图片
- 传递的gps坐标需要转换成百度坐标
- 因为坐标转换一次转换不能超过10个，所以需要在处理下数组
父级传递过来的值类似这种结构，经纬度值、点击弹出的图片地址
完整代码（细节就不拆分了，备注都写的比较详细）
import React from 'react';
import { message } from 'antd';
const BMap = window.BMap;
class TrackDetailMap extends React.Component{
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,//是否启用线编辑，默认为false
enableClicking: true,//是否响应点击事件，默认为true
strokeWeight:'8',//折线的宽度，以像素为单位
strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
strokeColor:"#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);
//图片加载完毕重绘infowindow
document.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: http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
758
