Google Map双Marker InfoWindow异常求助：显示异常且无用户名

嘿，我来帮你搞定这个Google Maps的问题！你遇到的一个Marker的InfoWindow不显示、另一个没展示用户名的情况，大概率是InfoWindow的实例管理或者内容赋值出了问题，咱们一步步拆解解决：

1. 别复用单个InfoWindow实例 #

很多新手容易踩的坑：只创建一个InfoWindow对象，然后给两个Marker绑定点击事件。这种情况下，只有最后绑定的Marker能正常弹出窗口，之前的会被覆盖掉。

正确的做法是给每个Marker分配独立的InfoWindow，或者在点击时实时更新内容并打开：

// 假设你已经创建了marker1和marker2
const usernameInput = document.getElementById('username-input');

// 给第一个Marker创建专属InfoWindow
const infoWindow1 = new google.maps.InfoWindow();
marker1.addListener('click', () => {
  // 实时获取用户名
  const username = usernameInput.value;
  infoWindow1.setContent(`<div><strong>用户名:</strong> ${username || '未输入用户名'}</div>`);
  infoWindow1.open(map, marker1);
});

// 给第二个Marker创建专属InfoWindow
const infoWindow2 = new google.maps.InfoWindow();
marker2.addListener('click', () => {
  const username = usernameInput.value;
  infoWindow2.setContent(`<div><strong>用户名:</strong> ${username || '未输入用户名'}</div>`);
  infoWindow2.open(map, marker2);
});

2. 确保用户名的取值时机正确 #

如果你的Marker是在用户输入用户名之前创建的，那一开始的InfoWindow内容里肯定没有用户名。所以一定要在点击Marker的时候实时获取最新的用户名，而不是在Marker创建时就固定死内容——毕竟用户可能之后才输入或修改用户名。

3. 检查Marker的初始化与事件绑定 #

你得确认两个Marker都被正确添加到地图上，并且都绑定了click事件：

• 确保调用了marker.setMap(map)，不然Marker根本不会显示在地图上，自然点击也没反应
• 检查变量名有没有拼写错误，比如把marker2写成marker1，导致其中一个Marker的事件没绑定上

4. 核对用户名输入框的ID #

别小看这个细节！如果你的HTML里用户名输入框的ID是username，但JS里写成了username-input，那肯定获取不到值，InfoWindow里就会是空的或者显示undefined。

比如你的HTML应该有类似这样的输入框：

<input type="text" id="username-input" placeholder="请输入你的用户名">

这里给你整合了一个完整的示例，你可以对照自己的代码调整：

<!-- HTML结构 -->
<div class="pac-card" id="pac-card">
  <div id="pac-container">
    <input id="pac-input-1" type="text" placeholder="搜索第一个地点">
    <input id="pac-input-2" type="text" placeholder="搜索第二个地点">
    <input id="username-input" type="text" placeholder="输入用户名">
  </div>
</div>
<div id="map" style="height: 400px; width: 100%;"></div>

<script>
let map;
function initMap() {
  // 初始化地图
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 39.9042, lng: 116.4074}, // 默认北京坐标
    zoom: 10
  });

  // 初始化两个地点自动完成输入框
  const autocomplete1 = new google.maps.places.Autocomplete(
    document.getElementById('pac-input-1'),
    {types: ['geocode']}
  );
  const autocomplete2 = new google.maps.places.Autocomplete(
    document.getElementById('pac-input-2'),
    {types: ['geocode']}
  );

  let marker1, marker2;
  const infoWindow1 = new google.maps.InfoWindow();
  const infoWindow2 = new google.maps.InfoWindow();
  const usernameInput = document.getElementById('username-input');

  // 处理第一个地点的选择事件
  autocomplete1.addListener('place_changed', () => {
    const place = autocomplete1.getPlace();
    if (!place.geometry || !place.geometry.location) return;

    // 移除旧的Marker（如果有的话）
    if (marker1) marker1.setMap(null);
    // 创建新的Marker并添加到地图
    marker1 = new google.maps.Marker({
      map: map,
      position: place.geometry.location,
      title: '地点1'
    });

    // 绑定点击事件，实时加载用户名
    marker1.addListener('click', () => {
      const username = usernameInput.value || '未输入';
      infoWindow1.setContent(`<div><strong>用户名:</strong> ${username}</div>`);
      infoWindow1.open(map, marker1);
    });

    // 移动地图到选中的地点
    map.setCenter(place.geometry.location);
  });

  // 处理第二个地点的选择事件
  autocomplete2.addListener('place_changed', () => {
    const place = autocomplete2.getPlace();
    if (!place.geometry || !place.geometry.location) return;

    if (marker2) marker2.setMap(null);
    marker2 = new google.maps.Marker({
      map: map,
      position: place.geometry.location,
      title: '地点2'
    });

    marker2.addListener('click', () => {
      const username = usernameInput.value || '未输入';
      infoWindow2.setContent(`<div><strong>用户名:</strong> ${username}</div>`);
      infoWindow2.open(map, marker2);
    });

    map.setCenter(place.geometry.location);
  });
}
</script>
<!-- 记得替换成你自己的API密钥 -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>

注意把代码里的YOUR_API_KEY换成你自己的Google Maps API密钥哦！

内容的提问来源于stack exchange，提问作者Alex Garret jones