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

要在页面里引入高德地图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>  //这里是自订的按钮，帮上定位的方法。