<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);
$.ajax({
url:'http://api.map.baidu.com/geocoder/v2/?ak=你的密钥&callback=renderReverse&callback=renderReverse&location=' + r.point.lat + ',' + r.point.lng + '&output=json&pois=1',
dataType: 'jsonp',
success: function(res) {
if (res.result.poiRegions==""||res.result.poiRegions==null) {
var result=res.result.formatted_address+res.result.sematic_description;
}else {
var result=res.result.formatted_address+res.result.poiRegions[0].name;
}
alert(result);
},
error:function(){alert("没找到地址信息");}
});
//地图监听事件
map.addEventListener('click', function (e) {
map.removeOverlay(mk);
mk = new BMap.Marker(e.point,{icon:icon});
map.addOverlay(mk);
$.ajax({
url:'http://api.map.baidu.com/geocoder/v2/?ak=你的密钥&callback=renderReverse&callback=renderReverse&location=' + e.point.lat + ',' + e.point.lng + '&output=json&pois=1',
dataType: 'jsonp',
success: function(res) {
if (res.result.poiRegions==""||res.result.poiRegions==null) {
var result=res.result.formatted_address+res.result.sematic_description;
}else {
var result=res.result.formatted_address+res.result.poiRegions[0].name;
}
alert(result);
},
error:function(){alert("没找到地址信息");}
});
});
}else {alert('failed'+this.getStatus());}
});
}
网友评论