Google地图JavaScript API标记弹出窗口仅在中心显示

Question

我正在使用Google Maps 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

解决问题（将InfowDindow与正确的标记相关联），一个选项是使用此类似问题的答案中使用的函数闭合：Google Maps JS API V3-简单多个标记示例。

在您的代码中：

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

概念证明小提琴

代码段：

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>