Google 地图信息窗口未显示正确数据

Question

我有公交车 API，我正在 Google 地图上显示轻轨车辆。我能够显示标记，但是当我将鼠标悬停在显示信息窗口时，所有标记都显示相同的 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

您只创建一个信息窗口（您不断用新信息窗口覆盖它，让它包含最后一个标记的信息）。您可以使用函数闭包修复它，如 Google Maps JS API v3 - Simple Multiple Marker Example.

的答案中所示

另一种选择是将信息窗口或其内容存储在标记的自定义成员中。

 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>

Google 地图信息窗口未显示正确数据

Google Maps Infowindow not showing correct data

javascript

google-maps

google-maps-api-3

infowindow