系统相关
首页 > 系统相关> > javascript – Google Maps API V3 infoWindow – 显示相同内容的所有infoWindows

javascript – Google Maps API V3 infoWindow – 显示相同内容的所有infoWindows

作者:互联网

在我的页面中,纬度,经度和信息窗口内容存在于名为obj的对象数组中.

因此,如果我需要第一个对象的属性的纬度,我可以调用obj [0] .latitude.

每个对象的infoWindow内容存储在obj [i] .text中.

我正在使用下面的循环来遍历lat& long值并显示标记和infoWindows.

  for (x=1; x<=obj.length; x++)
  {
      var latlng1 = new google.maps.LatLng(obj[x].latitude, obj[x].longitude);

  var marker2  = new google.maps.Marker({
    position : latlng1,
    map  : map,
    icon     : prevIcon
    });

  infowindow = new google.maps.InfoWindow();

  info = obj[x].text;

   google.maps.event.addListener(marker2, 'mouseover', function() {
       infowindow.setContent(info);
       infowindow.open(map, this);
      });

}

上面的代码有效,但所有的infoWindows都显示了最后一个obj [i] .text的内容.

如何仅将特定infoWindow(obj [x] .text)的infoWindow内容与该infoWindow实例相关联?

如果有人可以在不使用jQuery或任何其他外部库的情况下指出解决方案,那会更好.

谢谢,

解决方法:

应该让你走很长的路.

function attachMarker( data ) {

    var latLng = new google.maps.LatLng( data.latitude, data.longitude );

    var marker = new google.maps.Marker({
        position : latLng,
        map      : map, // global variable?
        icon     : prevIcon // global variable?
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
       infowindow.setContent( data.text );
       infowindow.open(map, this);
    });

    // add marker here.

}

// afaik, you only need 1 instance of InfoWindow if you only change content.
var infowindow = new google.maps.InfoWindow();

var i = obj.length;
while ( i-- ) {
    attachMarker( obj[ i ] );
}

标签:infowindow,javascript,google-maps,google-maps-api-3
来源: https://codeday.me/bug/20190926/1820450.html