百度地图API gps坐标转换为百度坐标

百度地图API官网示例

我写的例子，基于react

实现的功能：

1. 根据点画折线
2. 在点位置插入自定义图标
3. 点击图标的时候显示一张图片
4. 传递的gps坐标需要转换成百度坐标
5. 因为坐标转换一次转换不能超过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 =`${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))
}

效果图