高德地图进行浏览器定位并自定义定位按钮
要在页面里引入高德地图API
要在页面里引入高德地图API
<script src="https://webapi.amap.com/maps?v=1.3&key=你申请的key值&plugin=AMap.Walking"></script>
进行定位,先要去高德地图官网申请开发的key,这里官网文档写的很清楚。
然后按照API文档里接入js代码,引入后高德地图会默认给你一个定位按钮,这个按钮不能自定义,只能放在地图的四个角,不过可以自定义这个按钮的图标样式。
这里的小技巧就是在buttonDOM参数设置成一个隐藏的input,这样在地图上就看不到默认的定位按钮了。
var map, geolocation;
//加载地图,调用浏览器定位服务
map = new AMap.Map('dituContent', {
zoom: 16,
resizeEnable: true,
});
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
buttonDom:'<input hidden="true" >',
buttonPosition:'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
var str=['定位成功'];
str.push('经度:' + data.position.getLng());
str.push('纬度:' + data.position.getLat());
if(data.accuracy){
str.push('精度:' + data.accuracy + ' 米');
}//如为IP精确定位结果则没有精度信息
str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
document.getElementById('tip').innerHTML = str.join('<br>');
}
//解析定位错误信息
function onError(data) {
document.getElementById('tip').innerHTML = '定位失败';
}
然后在也面上自定义一个按钮,并绑定上定位的js方法。
<div id="dituContent"></div>
<div id="tip"></div>
<a onClick="geolocation.getCurrentPosition()"></a> //这里是自订的按钮,帮上定位的方法。