在web端精确定位到县级的高德地图API实现方法

在web端精确定位到县级的高德地图API实现方法

业务需求来自于需要通过单纯的浏览器定位用户当前所在的精确到县级的位置,尝试过百度地图的API定位,这里要吐槽一下,百度通过浏览器定位特别粗,不精确,仅能定位到市级,同样的通过IP定位高德则能定位到区级/县级,所以放弃百度,改用高德API实现。

共用到高德的两个JSAPI接口,一个是浏览器精确定位接口,另一个是逆地理编码接口,实现原理是先通过浏览器精确定位接口geolocation获取到用户当前的位置经纬度,然后通过该经纬度给逆地理编码接口获取详细县级名称,直接上代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>定位用户所在县级位置获取县级名称</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<body>
<div id='container' style="display: none;" ></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的高德AK&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
	var geocoder = new AMap.Geocoder({
		city: "010", //城市设为北京,默认:“全国”
		radius: 1000 //范围,默认:500
	});
    var map = new AMap.Map('container', {
        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,   //定位成功后是否自动调整地图视野到定位点

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
                var lnglat = [result.position.lng,result.position.lat];
                // 根据经纬度获取详细信息
                geocoder.getAddress(lnglat, function(status, result) {
                	if (status === 'complete'&&result.regeocode) {
                		var address = result.regeocode.formattedAddress;
                		console.log(result);
                	}else{
                		console.log('根据经纬度查询地址失败')
                	}
                });
            }else{
               console.error(result);
            }
        });
    });
</script>
</body>
</html>

以上是完整代码,result结果里有我们想要的县级/区级信息,district字段对应的就是县级名称,result输出结果如下:

{info: "OK", regeocode: {…}}
info: "OK"
regeocode:
addressComponent:
adcode: "440309"
building: ""
buildingType: ""
businessAreas: (2) [{…}, {…}]
city: "深圳市"
citycode: "0755"
district: "龙华区"
neighborhood: ""
neighborhoodType: ""
province: "广东省"
street: "民治大道"
streetNumber: "1079号"
township: "民治街道"
__proto__: Object
crosses: []
formattedAddress: "广东省深圳市龙华区民治街道民治大道1079号展滔科技大厦"
pois: []
roads: []
__proto__: Object
__proto__: Object

版权声明:本文为lionne原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。