高德地图进行浏览器定位并自定义定位按钮

Posted 2020-09-23 岁月无心

要在页面里引入高德地图API进行定位，先要去高德地图官网申请开发的key，这里官网文档写的很清楚。

<script src="https://webapi.amap.com/maps?v=1.3&amp;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‘, 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>  //这里是自订的按钮，帮上定位的方法。