vue 使用高德地图进入页面获取用户位置

最新推荐文章于 2023-05-18 10:21:20 发布

�Distance.?

最新推荐文章于 2023-05-18 10:21:20 发布

阅读量641

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45847120/article/details/107996860

版权

本文介绍如何在Vue应用中利用高德地图API获取用户当前位置，包括创建高德地图API key，安装依赖，引入自定义JS文件，解决定位权限问题以及将经纬度转换为实际地址的方法。

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

需求：当用户进入程序页面获取用户当前位置
1.创建高德地图的key值
在这里插入图片描述
2.安装依赖

npm install vue-amap --save

3.新建一个amp.js

export default function MapLoader () {   // <-- 原作者这里使用的是module.exports
    return new Promise((resolve, reject) => {
      if (window.AMap) {
        resolve(window.AMap)
      } else {
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.async = true
        script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=8451e6c7c28a37f1ab520e72299e3511'
        script.onerror = reject
        document.head.appendChild(script)
      }
      window.initAMap = () => {
        resolve(window.AMap)
      }
    })
  }

4.在所需页面引入 amp.js