vue引入高德地图

最新推荐文章于 2024-10-05 14:58:46 发布

摆烂小优

最新推荐文章于 2024-10-05 14:58:46 发布

阅读量154

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_52223449/article/details/118388731

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先附上效果图
在这里插入图片描述

1. 前往高德官方申请key值

高德 API
在这里插入图片描述

2. 这里用的是vue-cli写的项目，所以在utils目录下新建了一个AMap.js文件

在这里插入图片描述
附上AMap.js代码

export default function MapLoader () {
  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.4.11&callback=initAMap&key=申请的key值'
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}