收藏
回答

小程序map地图marker的label属性样式偏离Bug

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug map 微信安卓客户端 8.0.53.2740 2.32.3

安卓机问题一:marker的label属性没有居中显示

安卓机问题二:安卓机偶现label距离marker很远,而且marker数量显示不全。

微信以及手机系统信息:

在iOS显示正常。

微信小程序中marker渲染代码片段:

dataToMarkers(data) {
    if (!Array.isArray(data) || data.length === 0) {
      console.warn("数据为空或不是数组");
      return;
    }
    // 将场馆位置置为中心点
    const stadiumInfo = wx.getStorageSync("stadiumInfo") || "";
    const { latitude: stadiumLatitude, longitude: stadiumLongitude } =
      stadiumInfo;
    // 标签样式
    const labelStyle = {
      color: "#755134",
      borderColor: "#755134",
      borderWidth: 1,
      fontSize: 12,
      borderRadius: 10,
      bgColor: "#ffffff",
      padding: 8,
      textAlign: "center",
    };
    const markers = data.map(
      ({
        id,
        latitude,
        longitude,
        exhibitionId,
        explainId,
        exhibitionName,
        explainName,
        resourceUrl,
        packageIntro,
        audioDescription,
        stadiumId,
        isFree,
      }) => ({
        id: +explainId,
        latitude,
        longitude,
        iconPath:
          isFree === "1" || this.data.curPackageData[0].unLock
            ? `${CDN_PATH}/assets/icon/marker-unlock.png`
            : `${CDN_PATH}/assets/icon/marker-lock.png`,
        width: 32,
        height: 32,
        label: {
          content: explainName,
          ...labelStyle,
        },
        exhibitionId,
        explainId,
        exhibitionName,
        explainName,
        resourceUrl,
        packageIntro,
        audioDescription,
        stadiumId,
        isFree,
      })
    );

  // 更新marker和地图中心点
      this.setData({
        markers,
        location: {
          latitude: stadiumLatitude,
          longitude: stadiumLongitude,
      },
    });
  },


回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--Demons
    社区技术运营专员--Demons
    01-25

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    01-25
    有用
    回复
登录 后发表内容