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

时间:2018-01-15 17:47:50

标签: javascript google-maps-api-3

我一直在研究这个问题。我已经看过关于主题和几个教程的多个堆栈溢出帖子,但我无法使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();,它实际上似乎在浏览器控制台中工作,但在运行点击监听器时却没有。

非常感谢任何建议或指示。

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));

  }
}

3 个答案:

答案 0 :(得分:0)

Your variable infoWindow goes out of scope when returning a function, and you not modifying the outer infoWindow, but the one passed into the function. Try this.

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));

  }
}

答案 1 :(得分:0)

斯蒂芬的答案确定了infowindow的问题。我想帮助你学习编写更简单的代码。

此代码中存在许多您不需要的复杂功能;实际上你可以摆脱大部分代码!

代码首先将pointLoc数组转换为非常相似的labels数组,该数组重命名了几个字段。

然后它会将此descrip数组转换为四个单独的数组localemap.data.loadGeoJson();clickd3.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 ); }); }); });

不需要进行任何转换。

此外,在命名数组时,我建议对数组使用复数名称,并为数组的元素使用该名称的单数形式。你在某些地方这样做了,但并不是一贯的。

有一个def LeftClick(event): if c==True: next_value = " 123456789 " try: current_value = next_value[next_value.index(str(int(event.widget['text']))) + 1] except ValueError: current_value = "1" event.widget.config(text=current_value) #Create a 9x9 (rows x columns) grid of buttons inside the frame for row_index in range(9): for col_index in range(9): if (row_index in {0, 1, 2, 6, 7, 8} and col_index in {3, 4, 5}) or \ (row_index in {3, 4, 5} and col_index in {0, 1, 2, 6, 7, 8}): #Colours a group of 3x3 buttons together to differentiate the board better. colour = 'gray85' else: colour = 'snow' c=True btn = Button(frame, width = 12, height = 6, bg=colour) #create a button inside frame btn.grid(row=row_index, column=col_index, sticky=N+S+E+W) btn.bind("<Button-1>", LeftClick) buttons.append(btn) if row_index==4 and col_index==1: btn.config(text=2) c = False 调用无法执行任何操作,因为没有提供任何URL。

如果您以下面的代码中更简单的方式提供闭包,那么您也不需要static int a; static int a=0; 侦听器中的函数-the-returns-a-function。

以下是一个如何以更简单的方式完成整个事情的示例:

void foo()
{
    static int b;
    static int b=0; //error: Duplicate declaration of global variable 'b'
    ...

答案 2 :(得分:0)

我可以使用 jQuery 触发事件轻松处理它。

jQuery('.gm-ui-hover-effect').trigger('click');

只需将上面的代码放在标记的 addListener 函数中,不要忘记在脚本中包含 jQuery。