【高德地图】易采坑合集

1. HeatmapLayer 热力图层透明度opacity属性设置无效

热力图层必须是数组

2. 降低[point]自带文字透明度

将叠加图层的zIndex设置到很高即可降亮度

3. vue页面切换后autocomplete功能失效

因为各页面该功能id相同， 不同页面需要使用不同的id

4. PolyonLayer 区面图层点击图形无法获取数据（鼠标事件无效）

eventSupport属性默认为false，需要设置为true鼠标事件才生效

var layer = new Loca.PointLayer({
   eventSupport: true,
   map: map
});

5. npm引入报错 TypeError: Loca.XX is not a constructor

按官方教程引入，将版本2.0改为缺省版本即可

import AMapLoader from '@amap/amap-jsapi-loader'

AMapLoader.load({
        key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [],
        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: '1.3.2' // Loca 版本，缺省 1.3.2
        }
      })
        .then(() => {
          this.map = new AMap.Map('amap', {
            features: ['bg', 'road', 'building', 'point'],
            // mapStyle: "amap://styles/darkblue",
            center: this.center,
            pitch: 0,
            zoom: this.zoom,
            viewMode: '2D'
          })
          // 热力图层
          this.layerHeat = new Loca.HeatmapLayer({
            map: this.map
          })
        })
        .catch((e) => {
          console.log(e)
        })

6.高德地图第一次打开时热力图不显示，切换到别的页面再切换回来显示正常

问题描述
执行顺序

1. 加载地图
2. 加载热力图插件
3. 加载热力图数据

     this.loadAMap();
     this.initHeatMapLiveApp();


	// 加载地图
    loadAMap () {
      this.aMap = new AMap.Map("performance", {
        animateEnable: true,
        resizeEnable: true,
        center: this.center,
        zoom: 13,
        mapStyle: "amap://styles/darkblue"
      });
      this.loadHeatPlugin();
    },
    // 加载热力图插件
    loadHeatPlugin () {
      this.aMap.plugin(["AMap.Heatmap"], () => {
        this.heatMap = new AMap.Heatmap(this.aMap, {
          radius: 30,
          opacity: [0, 0.7],
          gradient: {
            0: "blue",
            0.25: "rgb(117,211,248)",
            0.5: "rgb(0, 255, 0)",
            0.75: "#ffea00",
            1.0: "red"
          }
        });
      });
    },
   // 加载热力图数据
    initHeatMapLiveApp () {
      ...
      this.heatMap.setDataSet({ data: this.heatdata});
    },

问题原因

加载热力图插件plugin是异步的，第一次打开，请求完数据执行this.heatMap.setDataSet({ data: this.heatdata});时，热力图 this.heatdata还没有加载好。

解决方案
加载完插件再请求数据

this.loadAMap();

// 加载热力图插件
loadHeatPlugin () {
      this.aMap.plugin(["AMap.Heatmap"], () => {
        this.heatMap = new AMap.Heatmap(this.aMap, {
          radius: 30,
          opacity: [0, 0.7],
          gradient: {
            0: "blue",
            0.25: "rgb(117,211,248)",
            0.5: "rgb(0, 255, 0)",
            0.75: "#ffea00",
            1.0: "red"
          }
        });
        //加载完插件再请求数据
        this.initHeatMapLiveApp();
      });
    },

7. USER_DAILY_QUERY_OVER_LIMIT，输入提示、POI搜索、逆地理编码等功能无效

原因：长期没关注key值，2021年后高的key值使用更新，不影响地图显示，但一些使用受限

自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用
注意：此次升级不会影响之前已获得 key 的使用；升级之后的新增的key必须要配备安全密钥一起使用，具体用法请您参看下文《JSAPI key和安全密钥设置和使用》（本次key升级新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险 。）

解决：进入控制台新申请key和秘钥，并修改引入，官方教程