vue H5中获取用户当前位置、城市（高德地图）

首先先在项目的public/index.html中引入高德地图（key值申请不懂的可以看官方文档：准备-入门-教程-地图 JS API v2.0 | 高德地图API<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>高德地图的引入在

-阿大头

7171人浏览 · 2022-03-31 23:06:03

-阿大头 · 2022-03-31 23:06:03 发布

首先先在项目的public/index.html中引入高德地图（key值申请不懂的可以看官方文档：准备-入门-教程-地图 JS API v2.0 | 高德地图API

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

高德地图的引入在其他<script>之前，放前面先让高德地图先加载，不然会经常出现AMap is not defined的问题～

接着在你需要获取当前位置的页面引入AMap

import AMap from "AMap";

在mounted中

AMap.plugin("AMap.Geolocation", () => {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
        });

          geolocation.getCityInfo((status, result) => {   //只能获取当前用户所在城市和城市的经纬度
            if (status == "complete") {
                console.log("result",result)

            }
           })
           geolocation.getCurrentPosition((status, result) => {  //获取用户当前的精确位置
                if (status == "complete") {
                console.log("result",result)

            }
          })
})

getCurrentPosition需要在https环境下才不会报错，我都是部署到测试环境进行测试的。