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

拿我格子衫来

发布于 2022-01-24 11:07:24

88200

代码可运行

文章被收录于专栏：TopFETopFE

运行总次数：0

代码可运行

官方推荐使用 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>