PC端调用百度地图(自定义控件、高德坐标转百度坐标)

百度账号注册和百度地图api引入可根据百度地图官方文档操作。
在使用过程中发现已知经纬度坐标是火星坐标，高德地图使用的正好是火星坐标，但又不想改用高德地图，因此将火星坐标转换成了百度坐标。最后根据设备状态实现了一个简单的自定义控件。

• 代码如下：

// 展示地图，将设备所在位置标注在地图中
showMap(re) {
    this.setState({mapShow: true})
    let {bmap_animation_bounce} = this.state  // 标识地图中标注点弹跳动画是否开启
    let points = re.device_info  // 备信息对象数组
    let region = re.region  // 区域名称
    let level = 10  // 地图级别

    let map = new BMap.Map('allmap')  // 创建Map实例
    map.centerAndZoom(region, level)  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true)  // 开启鼠标滚轮缩放

    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})
    var top_left_navigation = new BMap.NavigationControl()
    map.addControl(top_left_control)  // 左上角，添加比例尺
    map.addControl(top_left_navigation)  // 左上角，添加默认缩放平移控件

    var overView = new BMap.OverviewMapControl()
    var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT})
    map.addControl(overView)  // 添加默认缩略地图控件
    map.addControl(overViewOpen)  // 右下角，打开

    // 地图中添加标注相关
    this.showDeviceInfo(points, map, bmap_animation_bounce)

    // 得到自定义控件
    var myCtrl = this.myZoomControl(points, map, bmap_animation_bounce)

    // 添加自定义控件到地图当中
    map.addControl(myCtrl)
}

// 自定义地图控件
myZoomControl(points, map, bmap_animation_bounce) {
    let self = this
    // 自定义控件类，即function
    function ZoomControl() {
        // 默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT
        this.defaultOffset = new BMap.Size(60, 60)
    }
    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control()

    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map) {
        // 创建一个DOM元素
        var div = document.createElement('div')
        // 添加文字说明
        div.appendChild(document.createTextNode('清除在线设备弹跳动画'))
            
        // 设置控件样式
        div.style.padding = '3px 6px'
        div.style.cursor = "pointer"
        div.style.border = "1px solid gray"
        div.style.backgroundColor = "white"

        // 绑定事件,点击控件开启/关闭标注跳动的动画
        div.onclick = function(e) {
            bmap_animation_bounce = !bmap_animation_bounce
            div.innerText = bmap_animation_bounce ? '清除在线设备弹跳动画' : '显示在线设备弹跳动画'
            self.setState({bmap_animation_bounce})
            map.clearOverlays()
            self.showDeviceInfo(points, map, bmap_animation_bounce)
        }
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div)
        // 将DOM元素返回
        return div
    }
    // 创建控件
    var myZoomCtrl = new ZoomControl();
    return myZoomCtrl
}

// 地图中添加标注及点击标注时的注信息窗口
showDeviceInfo(points, map, bmap_animation_bounce) {
    let opt = {
        width: 0,  // 信息窗口宽度
        height: 0,  // 信息窗口高度
    }
    for(let i=0,pointsLen=points.length; i<pointsLen; i++) {
        // 通过调用自定义方法将高德坐标转为百度坐标
        let bd_point = this.bd_encrypt(points[i].lng, points[i].lat)
        let point = new BMap.Point(bd_point.bd_lng, bd_point.bd_lat)
        let marker = new BMap.Marker(point)  // 创建标注
        // 将标注添加到地图中
        map.addOverlay(marker)
        // 如果设备在线且弹跳动画开关开启，则给标注设置弹跳动画
        if(points[i].online && bmap_animation_bounce) {
            marker.setAnimation(BMAP_ANIMATION_BOUNCE)  // 跳动的动画
        }
        // 标注事件监听：点击标注，在信息窗口中显示设备信息
        marker.addEventListener('click', function(e) {
            let content = 'IMEI：'+points[i].imei+'<br />'
                        +'设备编号：'+points[i].device_id+'<br />'
                        +'信号值：'+points[i].signal+'<br />'
                        +'状态：'+(points[i].online ? '在线' : '离线') + '<br />'
            let p = e.target
            let po = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
            // 创建信息窗口对象
            let infoWindow = new BMap.InfoWindow(content, opt)
            // 开启信息窗口
            map.openInfoWindow(infoWindow, po)
       })
    }
}

// 火星(高德)坐标转百度坐标
bd_encrypt(gg_lng, gg_lat) {
    let X_PI = Math.PI * 3000.0 / 180.0
    let x = gg_lng, y = gg_lat
    let z = Math.sqrt(x * x + y * y) + 0.000002 * Math.sin(y * X_PI)
    let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI)
    let bd_lng = z * Math.cos(theta) + 0.0065
    let bd_lat = z * Math.sin(theta) + 0.006
    return {bd_lng, bd_lat}
}

• 最终效果：
  111.gif