使用高德地图API获取手机浏览器定位
在实际业务开发过程中,可能会要求获取用户操作功能时的位置信息,因为目前高德地图和百度地图都有API,我们只需要去调用下就可以实现这个小需求。
案例开始:
首先需要在HTML页面中放置一个div来作为地图的容器,我这里直接把这个div作为了隐藏域,因为没必要显示出来。
<div id='container1' style="display:none"></div>
然后就是引用高德地图API,然后写一段js代码就行了,onComplete是成功后返回的参数,我只取了经纬度,如果需要其他的可以根据具体需求去获取其他的一些参数。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=自己去高德开发者平台申"></script>
<script type="text/javascript">
var map1 = new AMap.Map('container1', {
resizeEnable: true
});
AMap.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:5s
buttonPosition: 'RB', //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
});
map1.addControl(geolocation);
geolocation.getCurrentPosition(function (status, result) {
if (status == 'complete') {
onComplete(result)
} else {
onError(result)
}
});
});
//解析定位结果
function onComplete(data) {
$("#PoLng").val(data.position.getLng());
$("#PoLat").val(data.position.getLat());
}
//解析定位错误信息
function onError(data) {
console.info(data);
}
</script>
效果图:
版权声明:
作者:兴兴
文章:使用高德地图API获取手机浏览器定位
链接:https://www.networkcabin.com/notes/1088
文章版权归本站所有,未经授权请勿转载。
作者:兴兴
文章:使用高德地图API获取手机浏览器定位
链接:https://www.networkcabin.com/notes/1088
文章版权归本站所有,未经授权请勿转载。
THE END