Infowindow标记不会关闭（Google地图） [英] Infowindow on marker doesn't close(Google maps)

问题描述

我使用标记infoWindow来显示信息。它会正确打开，并在地图上的某处点击时关闭。

  initMap（）{
 ...... ........... 
 map.addListener（'click'，function（）{
 infowindow.close（）; 
}）; 
} 
 
 
 
 var infowindow; 
 ..... 
 ............. 
 function markerPushWithInfoWindow（marker）{
 markers.push（marker）; 
 infowindow = new google.maps.InfoWindow（）; 
 marker.addListener（'click'，function（）{
 if（infowindow）{
 infowindow.close（）; 
} 
 infowindow.setContent（this。 info）; 
 infowindow.open（map，marker）; 
}）; 
} 
  

markerPushWithInfoWindow在动画中绘制标记时被调用（）。在动画运行时，infoWindow不会关闭（当在标记之外点击时，例如在地图上）时，它只会在动画暂停时关闭。

动画：我们获取（特定日期）的位置（纬度/经度）数据列表并通过汽车进行动画处理（重放功能）。

以下是一个如何在循环中创建多个标记的示例，它们共享一个共同的infowindow。注意在标记事件监听器上使用闭包。

 函数initialize（）{
 
 var mapOptions = {
 zoom：5，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 center：new google.maps.LatLng（1，1）
}; 
 
 var locations = [
 [new google.maps.LatLng（0，0），'Marker 1'，'Marker 1的Infowindow内容']，
 [new google .maps.LatLng（0，1），'Marker 2'，'Marker 2的Infowindow内容']，
 [new google.maps.LatLng（0,2），'Marker 3'，'Infowindow content for标记3']，
 [新的google.maps.LatLng（2，0），'标记4'，'标记4的Infowindow内容']，
 [new google.maps.LatLng（2， 1），'标记5'，'标记5的Infowindow内容']，
 [新的google.maps.LatLng（2,2），'标记6'，'标记6的Infowindow内容'] 
]; 
 
 var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 var infowindow = new google.maps.InfoWindow（）; 
 
 google.maps.event.addListener（map，'click'，function（）{
 infowindow.close（）; 
}）; 
 
 for（var i = 0; i< locations.length; i ++）{
 
 var marker = new google.maps.Marker（{
 position：地点[i] [0]，
地图：地图，
标题：locations [i] [1] 
}）; 
 
 google.maps.event.addListener（marker，'click'，（function（marker，i））{
 
 return function（）{
 infowindow.setContent （位置[i] [2]）; 
 infowindow.open（map，marker）; 
} 
 
}）（marker，i））; 
} 
} 
 
 initialize（）; 
  

JSFiddle demo

编辑：

不使用闭包的示例

JSFiddle演示

I am using marker infoWindow to display info. It opens properly and does close when clicked somewhere on map.

initMap(){
.................
    map.addListener('click', function () {
        infowindow.close();
    });
}



var infowindow;
.....
.............
function markerPushWithInfoWindow(marker) {
    markers.push(marker);
    infowindow = new google.maps.InfoWindow();
    marker.addListener('click', function () {
        if (infowindow) {
            infowindow.close();
        }
        infowindow.setContent(this.info);
        infowindow.open(map, marker);
    });
}

markerPushWithInfoWindow is called() when marker is drawn during animation. The infoWindow doesn't close(when clicked outside the marker i.e. on map) while the animation is running, it closes only when the animation is paused.

Animation: We fetch the list of position(latitude/longtitude) data from the DB(particular date) and animate it via car.(Replay feature).

解决方案

Here is an example of how you can create multiple markers in a loop that share a common infowindow. Note the use of the closure on the marker event listener.

function initialize() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(1, 1)
  };

  var locations = [
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
    [new google.maps.LatLng(2, 0), 'Marker 4', 'Infowindow content for Marker 4'],
    [new google.maps.LatLng(2, 1), 'Marker 5', 'Infowindow content for Marker 5'],
    [new google.maps.LatLng(2, 2), 'Marker 6', 'Infowindow content for Marker 6']
  ];

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var infowindow = new google.maps.InfoWindow();

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  for (var i = 0; i < locations.length; i++) {

    var marker = new google.maps.Marker({
      position: locations[i][0],
      map: map,
      title: locations[i][1]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      return function() {
        infowindow.setContent(locations[i][2]);
        infowindow.open(map, marker);
      }

    })(marker, i));
  }
}

initialize();

JSFiddle demo

Edit:

Example without use of closure

JSFiddle demo

这篇关于Infowindow标记不会关闭（Google地图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！