首页 > 代码库 > 高德地图进行浏览器定位并自定义定位按钮
高德地图进行浏览器定位并自定义定位按钮
要在页面里引入高德地图API进行定位,先要去高德地图官网申请开发的key,这里官网文档写的很清楚。
<script src="https://webapi.amap.com/maps?v=1.3&key=你申请的key值&plugin=AMap.Walking"></script>
然后按照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‘, one rror); //返回定位出错信息 }); //解析定位结果 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 one rror(data) { document.getElementById(‘tip‘).innerHTML = ‘定位失败‘; }
然后在也面上自定义一个按钮,并绑定上定位的js方法。
<div id="dituContent"></div> <div id="tip"></div> <a onClick="geolocation.getCurrentPosition()"></a> //这里是自订的按钮,帮上定位的方法。
高德地图进行浏览器定位并自定义定位按钮
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。