一、自动定位,获取当前详细信息
自动获取当前地理位置能获得经纬度及粗略地址信息,通过经纬度调用百度接口反查详细地址信息
function getLocation(){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
$.ajax({
url:'http://api.map.baidu.com/geocoder/v2/',
type: 'GET',
data:{
// callback:'getAddress',
location:r.point.lat+','+r.point.lng,
output:'json',
ak:"your ak",
},
dataType:'jsonp',
success:function(res){
console.log(res);
var address = res.result.addressComponent.province+' '+res.result.addressComponent.city+' '+res.result.addressComponent.district;
$('#txt_area2').val(address);
}
})
}
else {
// alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
}
二、根据坐标点画圆及自定义点的图标
通过关键字掉百度接口搜索地理坐标,以坐标为点画圆,给坐标在地图上标注图标,及label信息
<script type="text/javascript">
var map = new BMap.Map("map"),
shopLocationList = new Array(),
point = new BMap.Point(116.40390583019587, 39.9151754663074);
map.centerAndZoom(point, 15);
//vue 代码
search: function () {
var _me = this;
if (!this.query.radius) {
this.query.radius = 5;
}
if (!this.query.keyword){
alert('请输入地址')
return;
}
//通过关键字搜索地址
map.clearOverlays();
$.ajax({
type: "get",
url: "http://api.map.baidu.com/geocoder/v2/?ak=your ak&output=json&address=" + _me.query.keyword,
async: false,
dataType: 'jsonp',
success: function (data, status) {
_me.query.status_code = data.status;
if (data.status == 0) {
_me.query.lng = data.result.location.lng;
_me.query.lat = data.result.location.lat;
drawCircle(_me.query.lng, _me.query.lat, _me.query.radius);
} else {
_me.query.lng = 116.40390583019587;
_me.query.lng = 39.9151754663074;
}
},
error: function (error) {
alert(JSON.stringify(error) + "百度地图API功能调用失败!");
}
});
},
function drawCircle(lng, lat, radius) {
var point = new BMap.Point(lng, lat)
map.panTo(point);
var circle = new BMap.Circle(point, radius * 1000,
{
strokeColor: "red",
strokeWeight: 1,
strokeOpacity: 0.9,
fillColor: "blue",
fillOpacity: 0.1
}
);
map.addOverlay(circle);
// 替换标记点图
var myIcon = new BMap.Icon("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAhCAYAAAA2/OAtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM4QTRBQjRFNjNDMjExRTc4OTJERkM5M0MyMDNEOUU5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM4QTRBQjRGNjNDMjExRTc4OTJERkM5M0MyMDNEOUU5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzhBNEFCNEM2M0MyMTFFNzg5MkRGQzkzQzIwM0Q5RTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzhBNEFCNEQ2M0MyMTFFNzg5MkRGQzkzQzIwM0Q5RTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5SiWhrAAACJ0lEQVR42uyVzU7bQBCAZ8dJJSTnTwWpPWFVQlDhiOTEgQP0CUivPcEF9QjqAzR9gJYH6KF5A3gFqvbQE6ksRBASmBsVIJwfCYHxbmdRXIXdjRNaestI/pnZnc8zsztrBgPk0nWXgLEcF6KEjNXJFBQ8byfJhxlBjpPnmcwmvVboyhumBHRtYxh+KDQa/kDoebG4QsbNPjANLgA2xj2v1hd64bpVSvU9PFxqTz1vVYN2I/wCfykU8WocMeup4bExZSFa8IztW9P8KjrAMTgVLymbrKkUVOOyrHFKaty2qyYge8G/pz5GLmZxXuopiIC3eDOqWjv8Jy4q0/M8nZacFewaKibgk89igYC5XrvU05/EIpuLvhqiXb7zvZydLXHEXXU0vRW2CJDtV0MZcVhJMbUUKMQrJKNexwwllwCMI4bn0FDtEfGQbo6W+gR0hllxnBJXmq/sPEsIrSPEGdjDQPkhG9N8qZWRtkygzW7jHNWslQiU46dsWrVbnPtY2NurE/hEHQzfWvtJ0Nt3lkePnGJuSl68pWqa1y+cv37DfqgRS/1mjX0TR7hgaBSto3zDl+PdUMcyBHyXGqSNpT7BN7Hddgq+H/T2foWUrcfo/Th9IMO2HPhX4D1oF1yjCa9lKkPymiow+eS37XV5OFDHTZpgclGw06nKGg71O7n3gZkZh06f4z+pcV6+24YP/UepclEsividTviBPgj/QUbQEXQEfUz5LcAAq/vfhx3QTEwAAAAASUVORK5CYII=", new BMap.Size(22, 60));
// 实例化标记
starMarker = new BMap.Marker(point, {
icon: myIcon
});
starMarker.addEventListener("click", function () {
var p = starMarker.getPosition();
alert("这里是您所查找的中心点!\n坐标:" + p.lng + "," + p.lat);
});
map.addOverlay(starMarker);
}
function addShopMarker(point) {
var marker = new BMap.Marker(point);
marker.addEventListener("click", function () {
var p = marker.getPosition();
alert("msg");
});
map.addOverlay(marker);
marker.setLabel(new BMap.Label('msg', {
offset: new BMap.Size(20, -10),
color: "red",
fontSize: "12px",
backgroundColor: "white"
}));
}
</script>