jquery - 谷歌地图信息容器问题

Question

我对 Google 地图集成有两个顾虑

1. 信息容器正在像这样显示 2 。让它成为我单击的三个指针中的任何一个 信息容器显示在同一个地方。

我该如何解决这个问题

这是我的代码

for(var gMarker = 0; gMarker < userData.records.length ; gMarker++){
          var gMarkerThisImage = userData.records[gMarker].LatLng;
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(gMarkerThisImage[0], gMarkerThisImage[1]),
            map:      map,
            title:    'U.S.A center'
          });  
          (function(Marker) {
            console.log(gMarkerThisImage[0], gMarkerThisImage[1]);
            var contentString = '<div id="imageContent">'+
                              '<img src="'+userData.records[gMarker].imagePath+'" width = "100" height="100" alt = >'+
                              '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString , 
                position : new google.maps.LatLng(gMarkerThisImage[0], gMarkerThisImage[1])
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
            /*google.maps.event.addListener(marker, 'mouseout', function() {
                infowindow.close(map,marker);
            });*/
          }(marker));
        }

Answer 1

我已经重新组织了你的代码，看看它-

var infowindow = new google.maps.InfoWindow(); //declare it globally if you want one infowindow at a time.

for(var gMarker = 0; gMarker < userData.records.length ; gMarker++){
          var gMarkerThisImage = userData.records[gMarker].LatLng;
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(gMarkerThisImage[0], gMarkerThisImage[1]),
            map:      map,
            title:    'U.S.A center'
          });  
          (function(Marker) {
            console.log(gMarkerThisImage[0], gMarkerThisImage[1]);
            var contentString = '<div id="imageContent">'+
                              '<img src="'+userData.records[gMarker].imagePath+'" width = "100" height="100" alt = >'+
                              '</div>';
            myWindow(marker,contentstring);
            });
          }(marker));
        }

function myWindow(mark, content)
{
      google.maps.event.addListener(mark, 'mouseover', function() {
      infowindow.open(map,mark);
      infowindow.setContent(content);
      });
}