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