首先先在项目的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环境下才不会报错,我都是部署到测试环境进行测试的。

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐