高德地图报错：多个不一致的key

高德地图API使用与加载优化

原创已于 2022-06-14 16:33:46 修改 · 3.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-06-14 16:31:25 首次发布

这篇博客探讨了在使用高德地图API时如何进行有效加载和避免重复加载的问题。作者指出，首次进入页面时需要调用AMapLoader.load()加载地图，但后续页面使用地图则无需再次调用，直接初始化AMap类即可。文章详细介绍了初始化地图、设置中心点、加载插件以及处理点击事件的步骤，并展示了如何使用DistrictSearch插件搜索行政区信息。

如果进入页面第一次加载地图，需要调用加载器 AMapLoader.load（）加载，但如果首页加载后，再进入另一个页面继续使用加载器，就会报错: 多个不一致的key；也就是说：在第一次进入页面时使用高德地图加载器就行（使用一次），如果其他页面需要用到地图，去掉 AMapLoader.load()异步加载，直接使用 AMap类初始化地图即可；

  initMap() {
      const centerPosition = this.user.dept.longitudeLatitude.split(",");
      AMapLoader.load({
        key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",
        // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(async AMap => {
          this.map = new AMap.Map("container_screen", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            mapStyle: "amap://styles/143f0ccf9d9d8612ae24f7846639eb93",
            center: centerPosition || [115.48, 32.98] //初始化地图中心点位置
          });
          await this.getIndexTotal();
          this.totalInfo.wgGrids.forEach(item => {});
          this.map.on("click", () => {
            if (this.infoWindow) {
              this.infoWindow.close();
              this.infoWindowVisible = false;
              this.infoWindow = null;
            }
          });
          // this.editDridArea()
          //获取边界坐标点
          AMap.plugin("AMap.DistrictSearch", () => {
            var districtSearch = new AMap.DistrictSearch({
              // 关键字对应的行政区级别，共有5种级别
              level: "district",
              //  是否显示下级行政区级数，1表示返回下一级行政区
              subdistrict: 0,
              // 返回行政区边界坐标点
              extensions: "all"
            });

            // 搜索所有省/直辖市信息
            districtSearch.search("鹿邑县", (status, result) => {
              // 查询成功时，result即为对应的行政区信息
              this.handlePolygon(result);
            });
          });
        })
        .catch(e => {
          console.log(e);
        });
    },