markers 运行在开发者工具没问题 但是真机调试 或者发布体验版小程序 就完全不展示 不是图片路径问题

markers 运行在开发者工具没问题 但是真机调试 或者发布体验版小程序 就完全不展示 不是图片路径问题

操作步骤：

<map id="around-food-map" :enable-3D="enable3D" class="map" style="width: 100%;" :style="{height:mapheight}" show-location='true' :latitude="latitude" :longitude="longitude" :markers="markersList.length ? markersList : []" scale="scale" @markertap="markertap" @controltap="onControltap">
  <!-- 在小程序的回到自身图标 -->
  <!-- #ifdef MP-WEIXIN -->
  <cover-image class="img-map" src="https://oss.qiacaiba.com/crmebimage/app/img/ref-location.png" @click="onControltap"></cover-image>
  <!-- #endif -->
  <!-- 地图气泡 -->
  <cover-view slot="callout">
    <cover-view v-for="(id, index) in customCalloutMarkerIds" :key="index">
      <cover-view class="customCallout" :marker-id="id">
        <cover-image class="position-absolute" style="width: 92rpx; height: 78rpx;" src="markersList[index].iconPath"></cover-image>
        <cover-view class="content">
          {{ markersList[index].stationName }}
        </cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
</map>

预期结果：

初始默认的markers 会展示 但是退出这个页面 再进来 就不展示了

实际结果：

微信开发者工具展示markers 真及调试不展示markers

bug描述：

updateMapMarkers() {
  if (!this.housingList || this.housingList.length === 0) {
    this.markers = [];
    this.customCalloutMarkerIds = [];
    return;
  }

  // 创建新标记
  const newMarkers = this.housingList.map((item, index) => {
    return {
      id: item.id || index + 1,
      clusterId: index + 1,
      stationName: item.title || item.name || '房源',
      distance: item.distance || 0,
      checked: false,
      latitude: Number(item.latitude),
      longitude: Number(item.longitude),
      alpha: 0.8,
      width: 30,
      height: 30,
      iconPath: "https://oss.qiacaiba.com/crmebimage/app/img/homestay-loc1.png",
      callout: {
        content: item.title || item.name || '房源',
        color: '#333333',
        fontSize: 12,
        borderRadius: 4,
        bgColor: '#ffffff',
        padding: 4,
        anchorY: 0,
        anchorX: 0,
        display: 'ALWAYS',
      },
      housingData: item
    };
  });

  // 直接赋值，不使用异步操作
  this.markers = newMarkers;

  // 修改为对象数组，保存对应的索引
  this.customCalloutMarkerIds = newMarkers.map((marker, index) => marker.id);

  // 获取地图上下文并刷新视图
  const mapContext = uni.createMapContext('around-food-map', this);
  if (mapContext && typeof mapContext.includePoints === 'function') {
    mapContext.includePoints({
      points: newMarkers.map(marker => ({
        latitude: marker.latitude,
        longitude: marker.longitude
      })),
      padding: [80, 80, 80, 80]
    });
  }
}

图片

Image 1

Image 2

Image 3

Image 4


2 回复

求大佬帮忙解决一下


这是一个常见的微信小程序地图markers显示问题。主要原因可能有以下几点：

  1. 真机环境下，地图组件对markers数组的更新响应机制与开发者工具不同。建议在更新markers时使用深拷贝：
this.markers = JSON.parse(JSON.stringify(newMarkers));
  1. 确保经纬度值是Number类型，真机对数据类型要求更严格。你代码中已经做了转换，但可以加个验证：
latitude: isNaN(Number(item.latitude)) ? 0 : Number(item.latitude),
longitude: isNaN(Number(item.longitude)) ? 0 : Number(item.longitude)
  1. 尝试在onReady事件中初始化地图，确保地图完全加载后再设置markers：
<map @ready="mapReady" ...>

mapReady() {
  this.updateMapMarkers();
}

  1. 微信小程序真机环境下，地图marker的iconPath必须是https协议，且域名已在小程序后台配置。你的图片链接已经是https，但可以检查下域名是否在白名单。

  2. 退出页面再进入不显示的问题，可能是页面缓存导致的。可以在onShow生命周期中重新调用updateMapMarkers。

建议先尝试最简单的解决方案：在updateMapMarkers方法最后强制刷新视图：

this.$forceUpdate();
回到顶部