Vue 项目 使用百度地图
一、安装
npm i --save vue-baidu-map
二、引入插件 main.js
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: ''
})
三、使用
<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 放大比例
注:如发现定位有变差,可设置偏移值,如需要将其他坐标转为百度坐标,可按照以下操作(本文将腾讯坐标转为百度):
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
},