根据高德地图API渲染覆盖物失误导致的一个绑定左键事件的坑

业务需求

存入面区域覆盖物后，后面查询出来并渲染到高德地图上，并且点击该区域弹出区域相关基本信息。

坑

我存入MySql数据库的坐标格式

经过后端一系列操作后给前端的数据格式为Array数组

高德官方API对于多边形覆盖物的示例

细心的小伙伴应该发现了，官方API给的坐标里面的数组中的类型为number类型，并不是字符串类型。但我刚开始并未注意，主要是点与线我都是用字符串类型的坐标数组绑定左键事件都成功了，并且也回显无误。
唯独在多边形覆盖物这块绑定左键失败无效。后面经过反复比对测试才发现了这个bug。既然发现了就好办了，接下来就是如何解决了，我想着总不可能又因为面无法绑定就去改后端代码。将字符串改为number类型。这步最好是前端这边动手了

点，面覆盖物标记的渲染

  if (value[0].spatialType=='Mark'){
      //弹出右侧统计数量
       that.publicShowCount()
       that.countMark=value.length
       that.markB=true
       //在地图上渲染标记点
       for (let a=0;a<value.length;a++){
       let marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        offset: new AMap.Pixel(-8, -31),
        position: value[a].shapeDot, //坐标点
        extData: value[a].spatialId, //自定义标识参数
        map: that.map,
        draggable: false, //是否可拖拽
        cursor: 'move',
       });
       marker.setMap(that.map);
       marker.on('click',this.markClick)
   }
      that.map.setFitView();
 }
 //正是由于上面点标记的绑定左键事件成功导致我以为数据无误，“”加不加都不影响导致我误判，下面是修复后的代码
else if (value[0].spatialType=='gon'){  //如果是多边形覆盖物
 //弹出右侧统计数量
 that.publicShowCount()
 let sumLine=0;
 for (let a=0;a<value.length;a++){
   sumLine+=value[a].areas             //算出面积总和
 }
  sumLine=sumLine.toFixed(2)  //保留两位小数
  that.countGon=sumLine
  that.gonB=true
   //在地图上渲染标记点
   let path;
   for (let b=0;b<value.length;b++){
       if (value[b].shapeArr){      //value[b].shapeArr是面的坐标集合
       path = value[b].shapeArr.map(n=>n.map(Number))  //去除双引号 “XX”,将字符串改为单纯的number数字类型
      }
      let polygon = new AMap.Polygon({
          path: path,                    //坐标集合
          borderWeight : 4,              // 线条宽度，默认为 1
          strokeColor: 'red',            // 线条颜色
          lineJoin: 'round',             // 折线拐点连接处样式
          strokeWeight: 6,
          fillColor: '#1791fc',
          extData: value[b].spatialId,   //存入标识ID
          map: that.map,
      });
      polygon.on('click',that.gonClick) //绑定左键点击事件
      }
      that.map.setFitView();                 //地图自适应中心点

感言

还是不够细节，轮子跑起来不知其所以然。希望自己以后能注意这些小细节。顺带说下我使用的高德是2.0版本
上面注释大体讲的很明白了，如有不懂或建议欢迎提出，最近一直在做地图这块，还是有点心得的。