Ionic 2实时数据绑定问题：Google Maps自定义信息窗口无法自动更新

这个问题我之前碰到过，大概率是闭包陷阱或者DOM更新时机导致的，给你几个针对性的解决方案，不用额外点击就能让内容实时更新：

1. 先排查核心问题：闭包导致的旧值缓存 #

如果你是循环调用addMarker添加多个标记，很容易因为闭包导致所有标记的点击事件都引用最后一个标记的title值。解决办法是直接从当前点击的marker实例获取数据，而不是依赖外部变量或event参数：

原生JS修复示例 #

// 假设你的自定义信息窗口DOM元素
const customInfoWindow = document.getElementById('custom-info-window');
// 你的地图实例
const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 39.9042, lng: 116.4074},
  zoom: 10
});

function addMarker(position, markerTitle) {
  const marker = new google.maps.Marker({
    position: position,
    map: map,
    title: markerTitle
  });

  marker.addListener('click', () => {
    // 直接从当前marker实例获取最新title，避免闭包问题
    const currentTitle = marker.getTitle();
    // 实时更新信息窗口内容
    customInfoWindow.innerHTML = `<h4>${currentTitle}</h4>`;

    // 将地图坐标转换为页面像素坐标（调整偏移适配你的窗口样式）
    const pixelPos = map.getProjection().fromLatLngToDivPixel(marker.getPosition());
    customInfoWindow.style.left = `${pixelPos.x + 15}px`;
    customInfoWindow.style.top = `${pixelPos.y - 50}px`;

    // 强制触发DOM重绘，解决浏览器缓存渲染的问题
    customInfoWindow.style.display = 'none';
    void customInfoWindow.offsetWidth; // 触发重绘
    customInfoWindow.style.display = 'block';
  });
}

2. 框架环境下（React/Vue）：用状态驱动视图更新 #

如果你用了Vue/React这类框架，千万别直接操作DOM，要通过修改组件状态让框架自动更新视图：

Vue示例 #

<template>
  <div class="map-container">
    <div id="map"></div>
    <!-- 自定义信息窗口，由状态控制显示和内容 -->
    <div 
      class="custom-info" 
      v-if="showInfo"
      :style="{ left: infoX + 'px', top: infoY + 'px' }"
    >
      {{ currentMarkerTitle }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      showInfo: false,
      currentMarkerTitle: '',
      infoX: 0,
      infoY: 0
    }
  },
  mounted() {
    this.initMap();
    // 示例添加标记
    this.addMarker({lat: 39.9042, lng: 116.4074}, '北京');
    this.addMarker({lat: 31.2304, lng: 121.4737}, '上海');
  },
  methods: {
    initMap() {
      this.map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.8617, lng: 104.1954},
        zoom: 5
      });
    },
    addMarker(position, title) {
      const marker = new google.maps.Marker({
        position,
        map: this.map,
        title
      });

      marker.addListener('click', () => {
        // 修改状态，让Vue自动更新视图
        this.currentMarkerTitle = marker.getTitle();
        this.showInfo = true;
        // 计算窗口位置
        const pixelPos = this.map.getProjection().fromLatLngToDivPixel(marker.getPosition());
        this.infoX = pixelPos.x + 15;
        this.infoY = pixelPos.y - 50;
      });
    }
  }
}
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 600px;
}
#map {
  width: 100%;
  height: 100%;
}
.custom-info {
  position: absolute;
  background: white;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 999;
}
</style>

关键注意点 #

• 不要依赖event.title，直接用marker.getTitle()获取当前标记的最新数据；
• 如果遇到DOM不更新，通过先隐藏再显示+触发offsetWidth强制浏览器重绘；
• 框架环境下一定要用状态驱动，避免直接操作DOM导致的视图不同步。

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