Baidu map coordinate conversion

Vue project uses Baidu map

1. Installation

npm i --save vue-baidu-map

2. Introduce the plug-in main.js

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: ''
})

3. Use

<baidu-map class="bm-view" :center="center" :zoom="18" @ready="handleReadyMap">
        <bm-marker :position="center" :icon="{url: require('../../assets/position.png'), size: {width: 139, height: 139}}"/>
</baidu-map>
// handleReadyMap 初始化地图
// center中心点坐标
// zoom 放大比例

Note: If you find that the positioning has deteriorated, you can set the offset value. If you need to convert other coordinates to Baidu coordinates, you can follow the following operations (this article converts Tencent coordinates to Baidu):

    handleReadyMap({BMap, map}){
    //  传入坐标值
        var ggPoint = new BMap.Point(lng,lat);
        let geoCoder = new BMap.Convertor();
        var pointArr = [];
        pointArr.push(ggPoint);
        geoCoder.translate(pointArr, 1, 5, this.translateCallback)
    },
    /* 腾讯坐标转为百度 */  
    translateCallback(data){
      this.center.lng = data.points[0].lng
      this.center.lat = data.points[0].lat
    },