微信小程序填的地图坑

需求1：地图在缩放比例scale为14以下时展示聚合点，聚合点需要展示当前聚合商户的数量，点击聚合点之后地图缩放比例为14并展示商户点

解决方案：聚合点用地图中marker中的label形式展示

• iOS端点击之后label会被marker背景图片覆盖，并且无法再次置于marker背景图片之上，舍弃marker背景图改用无色背景，用label样式展示

this.markers.push({
    id: item.districtId,
    latitude: item.shopProfiles[0].lat,
    longitude: item.shopProfiles[0].lng,
    iconPath: baseImgPath + "common/transparent-circle.png", //透明无色背景图
    width: 40.5,
    height: 40.5,
    label: {
        content: item.shopCount < 10 ? " " + item.shopCount + " " : item.shopCount + "", //label要尽可能好看...
        color: "#ffffff",
        anchorX: -6,
        anchorY: -36,//content显示位置调整...
        fontSize: 20,
        borderRadius: 100,
        padding: 8,
        bgColor: "#f5382f"
    },
    shopList: item.shopProfiles //点击事件调用信息
});

• 点击放大步骤分为两步，移动地图中心点和将缩放比例scale放大为14：点击聚合点放大时iOS端问题解决方案
  • 先设置缩放比例为14，在进行移动中心点操作
  • 当第一次点击缩放比例scale为14之后，用户的缩放行为产生的scale变化不会对我们对地图组件绑定的mapScale重新赋值，导致再次赋值为14时地图并不会产生缩放。 黑科技：mapScale = 14.1 （如果跟踪地图scale变化而即时更新mapScale...会产生更为严重的用户体验问题）

this.mapScale = this.mapScale == 14 ? 14.1 : 14;
// 移动中心点
if (this.isIOS) {
  this.$nextTick(() => {
      //nexttick解决ios端移动中心点bug
      this.mapContext.moveToLocation({
          longitude: item.longitude,
          latitude: item.latitude
      });
  });
} else {
  this.mapContext.moveToLocation({
      longitude: item.longitude,
      latitude: item.latitude
  });
}

相关代码

<map
    id="map"
    :latitude="currentCity.latitude"
    :longitude="currentCity.longitude"
    :scale="mapScale"
    :markers="markers"
    @regionchange="regionchange" 
    @markertap="markertap"
    @labeltap="labeltap"
    @tap="maptap"
    :show-location="true"
    style="width: 100%;height: 100vh;"
></map>

regionchange(e) {
    let type = e.type;
    if (type == "end" && (e.causedBy == "scale" || e.causedBy == "update")) {
        if (this.preTime && +new Date() - this.preTime < 300) return;
        this.preTime = +new Date();
        setTimeout(() => {
            if (this.shopList.length > 0) this.markPoint();
        }, 300);
    }
},
//如果是通过搜索查询商户  缩放视野展示所有经纬度
this.mapContext.includePoints({
    points: this.markers,
    padding: [100, 100, 100, 100]
});