利用高德api定位当前位置

zhiweiday

已于 2025-08-12 13:03:44 修改

阅读量3.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html 定位 js javascript

于 2021-02-01 15:38:36 首次发布

本文链接：https://blog.csdn.net/l2539469416/article/details/113520428

html 专栏收录该内容

1 篇文章

订阅专栏

高德js定位，API介绍文档地址
https://lbs.amap.com/api/javascript-api/reference/location
PC 端优先使用精确 IP 定位，IP定位失败后使用浏览器定位；手机端优先使用浏览器定位，失败后使用IP定位；
HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=234969563d5e8fd4716c7b278a1a1374"></script>
    <style>
        html,
        body,
        #container{
            width: 100%;
            height: 100%;
        }

    </style>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
</head>
<body>

<div id="container">

</div>

<script>
    //初始化地图
    var map = new AMap.Map('container', {
        zoom:13,//级别
        viewMode:'3D',//使用3D视图
        resizeEnable:true,//可变尺寸大小
    });
    //实时路况
    var  trafficLayer = new AMap.TileLayer.Traffic({
        zInedx: 10
    });

    var marker = new AMap.Marker({
        position:[116.49,39.9]//位置
    })
    map.add(marker);
    //定位
    mapObj = new AMap.Map('container');


    mapObj.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });


        mapObj.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        geolocation.position

    });

    function onComplete(obj) {
          alert(obj.location_type+"定位")
    }
    function onError(obj) {
        alert(obj.info + '--' + obj.message);
        console.log(obj);
    }

</script>

</body>
</html>