javascript - 单击时不会弹出信息窗口

Question

我正在尝试获取已设置为具有动态内容的标记的信息窗口，但我遇到的问题是单击时根本不会打开信息窗口。

我相信我可能以错误的方式实现代码信息窗口。

代码

var mosqueMarker, count;

for (count = 0; count < mosqueLocations.length; count++){
      mosqueMarker = new google.maps.Marker({
      position: new google.maps.LatLng(mosqueLocations[count][1], mosqueLocations[count][2]),
      title: mosqueLocations[count][0],
      map: map
   })
}

 var mosqueInfowindow = new google.maps.InfoWindow({})

     mosqueMarker.addListener('click', function(count) {
           mosqueInfowindow.setContent(mosqueLocations[count][0]),
           console.log(mosqueLocations)
           mosqueInfowindow.open(map, mosqueMarker)


     })

标签： javascriptgoogle-maps

Answer 1

你需要改变（至少）三件事：

1. 在循环内移动mosqueMarker事件监听器
2. count获取循环中变量的函数闭包
3. 用于this引用侦听器函数内的标记（否则它将始终在循环中的最后一个标记上打开信息窗口）。

  for (var count = 0; count < mosqueLocations.length; count++) {
    var mosqueMarker = new google.maps.Marker({
      position: new google.maps.LatLng(mosqueLocations[count][1], mosqueLocations[count][2]),
      title: mosqueLocations[count][0],
      map: map
    });
    mosqueMarker.addListener('click', (function(count) {
    return function(evt) {
      mosqueInfowindow.setContent(mosqueLocations[count][0]),
        console.log(mosqueLocations)
      mosqueInfowindow.open(map, this)
      }})(count))
  }

概念证明小提琴

代码片段：

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: -33.9,
      lng: 151.2
    }
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var mosqueLocations = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
  ['Cronulla Beach', -34.028249, 151.157507],
  ['Manly Beach', -33.80010128657071, 151.28747820854187],
  ['Maroubra Beach', -33.950198, 151.259302]
];

function setMarkers(map) {
  var mosqueInfowindow = new google.maps.InfoWindow({})
  for (var count = 0; count < mosqueLocations.length; count++) {
    var mosqueMarker = new google.maps.Marker({
      position: new google.maps.LatLng(mosqueLocations[count][1], mosqueLocations[count][2]),
      title: mosqueLocations[count][0],
      map: map
    });
    mosqueMarker.addListener('click', (function(count) {
      return function(evt) {
        mosqueInfowindow.setContent(mosqueLocations[count][0]),
          console.log(mosqueLocations)
        mosqueInfowindow.open(map, this)
      }
    })(count))
  }
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>