使用高德地图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>

效果图:

THE END