vue中如何使用原生高德地图js

1. 参考高德地图 web api 获取key。

2. 在vue项目中异步加载JS API，核心代码如下：

    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.15&callback=initAMap&key=你获取的key';
          script.onerror = reject;
          document.head.appendChild(script);
        }
        window.initAMap = () => {
          resolve(window.AMap);
        };
      });
    }
   

3. 需要时进行调用，我选择在mounted生命周期中调用，代码示例如下：

   MapLoader().then(AMap => {
     console.log('地图加载成功');
     this.map = new AMap.Map('container', {
       zoom: 9,
     });
   }, e => {
     console.log('地图加载失败' ,e)
   });
   

4. 根据需要使用插件、实现功能，具体参考高德地图 web api

5. 一个简单的vue中使用原生高德js的demo

结语

需要交流请留言，看到第一时间回复