Google Maps InfowDindow未显示正确的数据

Question

我有一个Transit API，我正在Google地图上显示轻轨车辆。我可以显示标记，但是当我鼠标以显示Infowdow的鼠标时，所有标记都会显示相同的LAT/LONG对。就像只为所有车辆展示一套车辆的一套坐标。我觉得我在这里缺少一些简单的东西。

<script>                                                                                    
  var map;                                                                                  
  var infoWindow;                                                                           
  function initMap() {                                                                      
    map = new google.maps.Map(document.getElementById('map'), {                             
      center: {lat: 45.5231, lng: -122.6765},                                               
      zoom: 11                                                                              
    });                                                                                     
    {% for vehicle in vehicles  %}                                                          
    var marker = new google.maps.Marker({                                                   
      position: {lat: {{ vehicle.latitude }}, lng: {{ vehicle.longitude }}},                
      map: map                                                                              
    });                                                                                     
    infowindow =  new google.maps.InfoWindow({                                              
    content: "Position: "+String({{ vehicle.latitude }})+String({{ vehicle.longitude}})     
    });                                                                                     
    marker.addListener('mouseover', function() {                                            
        infowindow.open(map, this);                                                         
    });                                                                                     
    marker.addListener('mouseout', function() {                                             
        infowindow.close();                                                                 
    });                                                                                     
    {% endfor %}                                                                            
  }                                                                                         
</script>  

Answer 1

您只创建一个InfowDINDOW（您可以不断用新的Inflowwring覆盖它，而将其包含了最后一个标记的信息）。您可以使用函数闭合来修复它，如Google Maps JS API V3的答案中所示 - 简单的多重标记示例。

另一个选项是将InfowDindow或其内容存储在标记的自定义成员中。

 var marker = new google.maps.Marker({                                                   
     position: {lat: {{ vehicle.latitude }}, lng: {{ vehicle.longitude }}},                
     map: map,
     content: "Position: "+String({{ vehicle.latitude }})+String({{ vehicle.longitude}})                                                                               
  });        
  marker.addListener('mouseover', function() {             
       infowindow.setContent(this.content);                               
       infowindow.open(map, this);                                                         
  });           

代码段：

var map;
var infoWindow;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 42,
      lng: -72
    },
    zoom: 10
  });
  infowindow = new google.maps.InfoWindow({});
  // {% for vehicle in vehicles  %}                                                          
  var marker = new google.maps.Marker({
    position: {
      lat: 42,
      lng: -72
    },
    map: map,
    content: "Position: " + 42 + "," + -72
  });
  marker.addListener('mouseover', function() {
    infowindow.setContent(this.content);
    infowindow.open(map, this);
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
  });
  var marker = new google.maps.Marker({
    position: {
      lat: 42.1,
      lng: -72.1
    },
    map: map,
    content: "Position: " + 42.1 + "," + -72.1
  });
  marker.addListener('mouseover', function() {
    infowindow.setContent(this.content);
    infowindow.open(map, this);
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>