最新高德地图 以npm方式引入

官方推荐使用 JSAPI Loader (推荐)

JSAPI Loader是高德提供的 API 加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法，具有以下特性：

• 支持以 普通JS 和 npm包 两种方式使用；
• 有效避免错误异步加载导致的 JSAPI 资源加载不完整问题；
• 对于加载混用多个版本 JSAPI 的错误用法给予报错处理；
• 对于不合法加载引用 JSAPI 给予报错处理；
• 支持指定 JSAPI 版本；
• 支持插件加载；
• 允许多次执行加载操作，网络资源不会重复请求，便于大型工程模块管理；
• 支持IE9以上的浏览器，不支持IE8以下

安装loader包

npm i @amap/amap-jsapi-loader --save-dev
 

在vue组件中使用 如此

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     
  <div class="home-container">
     
    
   

    

     

    
    

     
    <h4 class="text-center">AMap疑难问题的解决方案及优秀实例解析</h4>
     
    
   

    

     

    
    

     
    <div class="flex-center">
     
    
   

    

     

    
    

     
      <div id="mymap" style="height:500px;width:500px"></div>
     
    
   

    

     

    
    

     
    </div>
     
    
   

    

     

    
    

     
  </div>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      import AMapLoader from "@amap/amap-jsapi-loader";
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     
  name: "Home",
     
    
   

    

     

    
    

     
  components: {},
     
    
   

    

     

    
    

     
  data() {
     
    
   

    

     

    
    

     
    return {
     
    
   

    

     

    
    

     
      map: null
     
    
   

    

     

    
    

     

          };
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  mounted() {
     
    
   

    

     

    
    

     
    this.initMap();
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  methods: {
     
    
   

    

     

    
    

     
    initMap() {
     
    
   

    

     

    
    

     

            AMapLoader.load({
     
    
   

    

     

    
    

     
        key: "your key", // 申请好的Web端开发者Key，首次调用 load 时必填
     
    
   

    

     

    
    

     
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     
    
   

    

     

    
    

     
        plugins: [] //插件列表
     
    
   

    

     

    
    

     

            })
     
    
   

    

     

    
    

     

              .then(AMap => {
     
    
   

    

     

    
    

     
          this.map = new AMap.Map("mymap");
     
    
   

    

     

    
    

     

              })
     
    
   

    

     

    
    

     

              .catch(e => {
     
    
   

    

     

    
    

     
          console.log(e);
     
    
   

    

     

    
    

     

              });
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      };
     
    
   

    

     

    
    

     

      </script>
     
    
   

    

     

    
    

     

      <style lang="scss"></style>
     
    
  
 

关注我, 获取更多前端知识

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/106075771