vue：vue中使用百度地图

Posted 2020-11-12 llqwm

一：初步绘制百度地图
1:
npm install bmap --s

2：
<!-- 在index.html中添加百度地图javascript API接口； -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥" ></script>

3：
// 在webpack.base.conf.js配置文件中配置BMap,(创建BMap对象)，在module.exports 中与entry平级；
externals: {
‘BMap‘: ‘BMap‘
},

4：
// 导入BMap组件
import BMap from ‘BMap‘

5：
<!--地图容器-->
<div id="allmap" class="allmap"></div>

mounted() {

// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
}

.allmap {
height: 600px;
}

二：定位

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert(‘您的位置：‘+r.point.lng+‘,‘+r.point.lat);
}
else {
alert(‘failed‘+this.getStatus());
}
});