高德地图的自动定位功能

最新推荐文章于 2023-09-11 18:30:22 发布

追逐春天的大孩子

最新推荐文章于 2023-09-11 18:30:22 发布

阅读量3.4k

点赞数

分类专栏： react 地图文章标签：高德地图

本文链接：https://blog.csdn.net/weixin_43709908/article/details/108755967

版权

本文介绍了如何利用高德地图开放平台注册获取key值，然后在网页中创建地图并利用IP自动获取用户当前位置，同时展示如何在地图上添加点标记，并实现地图的点击事件交互功能。

摘要由CSDN通过智能技术生成

1.去高德地图开放平台去注册，获得自独一无二的key值

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2.准备一个div的盒子作为地图属性，并为该div指定id属性

<div id="container"></div>

3.加载页面自动根据ip获得当前所在位置

let mapObj = new AMap.Map('container', {
   
            resizeEnable: true
        });
        
        let geolocation = new AMap.Geolocation({
   
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
            maximumAge: 0,            // 定位结果缓存0毫秒，默认：0
            // convert: false,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            panToLocation