地图定位点击改变覆盖物
具体实现
<button @click="ready">我的位置</button>
<div id="allmap"></div>
记得在js里引入import BMap from 'BMap';
也可以引入外部图片import imgIcon from '../assets/img/icon/map_icon.png';
ready(){
let that=this;
let geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
// 获取当前坐标
if(this.getStatus() == BMAP_STATUS_SUCCESS){
// 创建地图
let map = new BMap.Map("allmap");
let point = new BMap.Point(r.point);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom(true);//开启滚动
// 创建覆盖物
var mk = new BMap.Marker(r.point); // 覆盖物的位置，在定位处
let icon = new BMap.Icon(imgIcon,new BMap.Size(20,22)); // 覆盖物的大小
map.addOverlay(mk); //在地图上添加覆盖物
map.panTo(r.point);
//地图监听事件
map.addEventListener('click', function (e) {
map.removeOverlay(mk); // 移除定位的红色覆盖物
mk = new BMap.Marker(e.point,{icon:icon}); // 在鼠标点击的位置创建新的覆盖物
map.addOverlay(mk); // 在地图上添加覆盖物
});
}else {alert('failed'+this.getStatus());}
});
}
