google 地图 javascript api 标记弹出窗口仅显示在中心

Question

我正在使用 Google 地图 JavaScript API 使用弹出窗口创建多个标记 (InfoWindow)

function initMap(){

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: {lat: 20, lng: 0}
    });

    //console.log(dbResults);

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

        var _coords = dbResults[i].location.split(',');
        var coords = {lat: parseFloat(_coords[0]), lng: parseFloat(_coords[1])}
        //console.log(coords);

        var marker = new google.maps.Marker({
            position: coords,
            map: map
        });

        var infowindow = new google.maps.InfoWindow({
            content: '<div>'+dbResults[i].title+'</div>'
        });

        marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
    }

}

标记正确显示在地图周围，但弹出窗口仅显示在地图中心（而不是出现在所属标记位置附近）

我需要更改什么才能使它们正常工作？

Answer 1

要解决这个问题（将 InfoWindow 与正确的标记相关联），一种选择是使用函数闭包，如以下类似问题的答案所示：Google Maps JS API v3 - Simple Multiple Marker Example.

在您的代码中：

marker.addListener('click', (function(marker, infowindow) {
    return function(evt) {
    infowindow.open(map, marker);
}}(marker,infowindow)));

proof of concept fiddle

代码片段：

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {
      lat: 20,
      lng: 0
    }
  });

  //console.log(dbResults);
  var dbResults = [{
    location: "42,-72",
    title: "Here"
  }, {
    location: "45,-112",
    title: "There"
  }, {
    location: "20,0",
    title: "Somewhere"
  }];
  for (var i = 0; i < dbResults.length; i++) {

    var _coords = dbResults[i].location.split(',');
    var coords = {
        lat: parseFloat(_coords[0]),
        lng: parseFloat(_coords[1])
      }
      //console.log(coords);

    var marker = new google.maps.Marker({
      position: coords,
      map: map
    });

    var infowindow = new google.maps.InfoWindow({
      content: '<div>' + dbResults[i].title + '</div>'
    });

    marker.addListener('click', (function(marker, infowindow) {
      return function(evt) {
        infowindow.open(map, marker);
      }
    }(marker, infowindow)));
  }

}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

google 地图 javascript api 标记弹出窗口仅显示在中心

google maps javascript api markers popups shown only at center

javascript

google-maps

google-maps-markers