Question

我正在使用标记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不会关闭（当在标记之外点击时，即在地图上点击时），只有在动画暂停时它才会关闭。

动画：我们从数据库（特定日期）获取位置（纬度/经度）数据列表，并通过汽车为其设置动画。（重播功能）。

Answer 1

以下是如何在循环中创建共享公共信息窗口的多个标记的示例。请注意在标记事件侦听器上使用闭包。

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

修改

不使用闭包的示例

JSFiddle demo

标记上的Infowindow未关闭（Google地图）

1 个答案: