Vue2使用x5-gmaps渲染地图正常但Marker标记不显示问题求助

• 检查响应式数组初始化规则
  Vue2的响应式要求数组必须提前在data中显式声明，如果你没有在data中提前定义propsForMap: []，后续推入数组的元素不会触发视图更新，标记自然不会渲染。
  正确的data声明示例：

data() {
  return {
    propsForMap: [],
    propsForSale: [],
    loading_me: false
    // 其他业务变量
  }
}

• 调整数据请求时机，晚于地图初始化
  x5-gmaps的标记组件需要等地图实例完全加载完成后传入数据才会正常渲染，你可以监听地图的mounted事件，拿到实例后再发起Firebase数据请求，避免数据加载早于地图初始化导致标记丢失。
  修改后的模板代码：

<div class="mapImgDiv"> 
   <gmaps-map ref="map" @mounted="loadPropertiesData"> 
      <gmaps-marker 
        v-for="(item, i) in propsForMap" 
        :key="i" 
        :position="{lat : parseFloat(item.lat) , lng: parseFloat(item.long) }" 
      />
   </gmaps-map>
</div>

将原来的Firebase查询逻辑封装到loadPropertiesData方法中即可。

• 排查视口遮挡问题
  标记有可能已经正常渲染，但默认地图的中心点/缩放层级不在标记所在区域，导致你看不到标记。可以在数据加载完成后，手动调整地图视口到标记区域：

// 数据加载完成后追加以下逻辑
if (self.propsForMap.length) {
  const firstPoint = self.propsForMap[0]
  // 调用原生谷歌地图实例方法调整视角
  self.$refs.map.$mapObject.setCenter({
    lat: parseFloat(firstPoint.lat),
    lng: parseFloat(firstPoint.long)
  })
  self.$refs.map.$mapObject.setZoom(13)
}

• 优化响应式更新逻辑
  如果数组初始化正确仍无更新，可以改用Vue2官方推荐的$set方法推入元素，确保触发响应式更新，必要时可调用$forceUpdate强制重渲：

querySnapshot.forEach(doc => {
  const data = doc.data();
  self.$set(self.propsForSale, self.propsForSale.length, data);
  self.$set(self.propsForMap, self.propsForMap.length, data);
});
// 所有数据推入完成后可加一行强制更新
self.$forceUpdate()

• 验证坐标绑定值格式
  可以临时增加调试代码，确认绑定到position属性的经纬度是数字类型而非字符串/NaN：

<div v-for="(item,i) in propsForMap" :key="i">
  标记{{i}}坐标：lat={{parseFloat(item.lat)}}（{{typeof parseFloat(item.lat)}}），lng={{parseFloat(item.long)}}（{{typeof parseFloat(item.long)}}）
</div>

内容的提问来源于stack exchange，提问作者tharnos_nos