Google Maps API v3 infoWindow.close（）不会在点击时关闭其他人

Question

我已经为此工作了一段时间。 我已经查看了关于该主题的多个堆栈溢出帖子和一些教程，但是我无法使infoWindow.close（）正常工作。

我什至尝试使用jQuery单击$('#googleMap > div > div > div:nth-child(1) > div:nth-child(4) > div:nth-child(4) > div:nth-child(1) > div:nth-child(3)').click(); 实际上似乎可以在浏览器控制台中运行，但在运行Click侦听器时却无效。

任何建议或指示，不胜感激。

d3.csv('/data/locs.csv', function(locs){
  var obj = [];

  for(i=0;i<locs.length;i++) {
    var country = locs[i].country;
    var location = locs[i].location;
    var lat = locs[i].lat;
    var long = locs[i].long;
    var description = locs[i].description;
    obj.push({
      con: country,
      location: location,
      lat: lat,
      lng: long,
      description: description
    });
  }
  console.log(obj);
  initMap(obj)
});

function initMap(obj, error) {
  if (error){console.log("Error: "+error)}

  var openInfoWindow = null;

  var mapProp = {
    center: {lat: 39.8283, lng: -98.5795},  
    zoom: 2
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  var pointLoc = [];
  var labels = [];
  var descrip = [];
  var locale = [];

  for(i=0;i<obj.length;i++) {
    pointLoc.push({lat: obj[i].lat, lng: obj[i].lng});
    labels.push(obj[i].con);
    descrip.push(obj[i].description);
    locale.push(obj[i].location);
  }

  map.data.loadGeoJson();

  for (var i = 0; i < pointLoc.length; i++) {
    var coords = pointLoc[i];
    var latLng = new google.maps.LatLng(coords.lat,coords.lng);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });

    var contentStr = '<div id="popcontent">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">'+descrip[i]+'</h1>'+
        '<p>'+locale[i]+', '+labels[i]+'</p>' +
        '</div>';

    var infoWindow = new google.maps.InfoWindow({
      maxWidth: 300
    });

    google.maps.event.addListener(marker,'click', (function(marker,contentStr,infowindow){
      infowindow.close();
      return function() {
        infowindow.setContent(contentStr);
        infowindow.open(map, marker);
      };
    })(marker,contentStr,infoWindow));

  }
}

Answer 1

返回函数时，变量infoWindow超出范围，并且您未修改外部infoWindow，而是将其传递到函数中。 尝试这个。

d3.csv('/data/locs.csv', function(locs){
  var obj = [];

  for(i=0;i<locs.length;i++) {
    var country = locs[i].country;
    var location = locs[i].location;
    var lat = locs[i].lat;
    var long = locs[i].long;
    var description = locs[i].description;
    obj.push({
      con: country,
      location: location,
      lat: lat,
      lng: long,
      description: description
    });
  }
  console.log(obj);
  initMap(obj)
});

function initMap(obj, error) {
  if (error){console.log("Error: "+error)}

  var openInfoWindow = null;

  var mapProp = {
    center: {lat: 39.8283, lng: -98.5795},  
    zoom: 2
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  var pointLoc = [];
  var labels = [];
  var descrip = [];
  var locale = [];

  for(i=0;i<obj.length;i++) {
    pointLoc.push({lat: obj[i].lat, lng: obj[i].lng});
    labels.push(obj[i].con);
    descrip.push(obj[i].description);
    locale.push(obj[i].location);
  }

  map.data.loadGeoJson();

  for (var i = 0; i < pointLoc.length; i++) {
    var coords = pointLoc[i];
    var latLng = new google.maps.LatLng(coords.lat,coords.lng);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });

    var contentStr = '<div id="popcontent">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">'+descrip[i]+'</h1>'+
        '<p>'+locale[i]+', '+labels[i]+'</p>' +
        '</div>';

    var infoWindow = new google.maps.InfoWindow({
      maxWidth: 300
    });

    google.maps.event.addListener(marker,'click', (function(marker,contentStr,infowindow){
      infowindow.close();
      return((function(infowindow) {
        infowindow.setContent(contentStr);
        infowindow.open(map, marker);
      })(infowindow));
    })(marker,contentStr,infoWindow));

  }
}

Answer 2

Stephen的答案指出了信息窗口中的问题。 我想帮助您学习编写更简单的代码。

此代码中有很多不必要的复杂功能； 实际上，您可以摆脱大部分代码！

代码首先将locs数组转换为非常相似的obj数组，该数组具有重命名的几个字段。

然后将其转换这个obj阵列到四个单独的阵列pointLoc ， labels ， descrip ，和locale 。

不需要任何转换。

另外，在命名数组时，建议对数组使用复数名称，对数组元素使用单数形式。 您在某些地方这样做，只是不一致。

有一个map.data.loadGeoJson(); 调用没有任何作用，因为没有提供URL。

如果您以更简单的方式提供闭包（如下面的代码所示），则您也不需要click侦听器中的返回函数的功能。

这是一个示例，说明如何以更简单的方式完成全部操作：

d3.csv( '/data/locs.csv', function( places ) {
    var infoWindow;

    var map = new google.maps.Map( document.getElementById('googleMap'), {
        center: { lat: 39.8283, lng: -98.5795 },
        zoom: 2
    });

    places.forEach( function( place ) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng( place.lat, place.long ),
            map: map
        });

        google.maps.event.addListener( marker, 'click', function() {
            if( infoWindow ) infoWindow.close();

            var content =
                '<div id="popcontent">' +
                    '<div id="siteNotice">' +
                    '</div>' +
                    '<h1 id="firstHeading" class="firstHeading">' + place.description + '</h1>' +
                    '<p>' + place.location + ', ' + place.country + '</p>' +
                '</div>';

            infoWindow = new google.maps.InfoWindow({
                maxWidth: 300,
                content: content
            });
            infoWindow.open( map, marker );
        });
    });
});