谷歌地圖只在中心

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>