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
},