谷歌地图只在中心

Question

我使用谷歌地图的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); 
     }); 
    } 

} 

的市场上赢得正确显示周围的地图，但弹出窗口中只显示了在创建多个标志所示的JavaScript API标志的弹出窗口地图的中心（而不是出现在所属标记位置附近）

我需要更改哪些内容才能使它们正常工作？

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>