爲什麼Google Maps JavaScript API v3在我嘗試創建第二個地圖實例時無法正常工作？

在我的web應用程序中，我使用的是Google Maps JavaScript API v3。在網頁中，我使用以下代碼創建谷歌地圖：爲什麼Google Maps JavaScript API v3在我嘗試創建第二個地圖實例時無法正常工作？

var centerLatLng = new google.maps.LatLng(obj.centerlat, obj.centerlong); 
var myOptions = { 
    center: centerLatLng, 
    zoom: 17, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    draggable: true 
}; 

var map = new google.maps.Map(document.getElementById("map_convas"), myOptions); 

var markerArray = obj.locations; 
var triangleCoords = new Array(); 

for(var x=0;x<markerArray.length;x++){ 
     triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude)); 
} 

var polypath = new google.maps.Polyline({ 
     path: triangleCoords, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
}); 

polypath.setMap(map);

此代碼正確顯示地圖。然後我在該地圖下有一個按鈕。當我點擊該按鈕時，另一個google javascript地圖應該顯示在一個名爲map_convas_1的div中，該div位於同一頁面中。代碼爲了這個，我寫的是以下幾點：

$('#secondmapbtn').unbind("click"); 
$('#secondmapbtn').bind('click', function(){ 


     var centerLatLng2 = new google.maps.LatLng(secondcenterlat, secondcenterlong); 
var myOptions2 = { 
    center: centerLatLng2, 
    zoom: 17, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    draggable: true 
}; 
    $('#map_convas_2').show(); 
var map2 = new google.maps.Map(document.getElementById("map_convas_2"), myOptions2); 

var secondMarkerArray = secondobj.locations; 

// putting markers in map 

    for(var i=0;i<markerArray.length;i++){ 
     var myLatlng = new google.maps.LatLng(secondMarkerArray[i].latitude, secondMarkerArray[i].longitude); 

     var marker = new google.maps.Marker({ 
      clickable: true, 
      position: myLatlng, 
      map: map2, 
      zIndex: i 
     }); 
     marker.setIcon('marker_icon.png'); 
} 
});

HTML兩種div的是

<div id='map_convas'></div> 
<div id='map_convas_2'></div>

和css是：

#map_convas{ 
position: absolute; 
    border-radius: 8px; 
    width:657px; 
    height:592px; 
    top: 50px; 
    left: 100px; 
} 

#map_convas_2{ 
position: absolute; 
    border-radius: 8px; 
    width:657px; 
    height:592px; 
    top: 700px; 
    left: 100px; 
    display:none; 
}

點擊按鈕後，會彈出第二個地圖，但它不顯示正確。我附上了第一張和第二張地圖的截圖。如果我評論第一個地圖實例代碼，那麼第二個地圖工作正常。這意味着當我創建第二個地圖實例時會出現問題。有人知道爲什麼第二張地圖不好，以及如何解決這個問題？

First Map

Second Map

來源

2012-08-08 Piscean

你能爲這兩個畫布提供HTML代碼嗎？可能還有CSS規則。或者甚至上傳代碼，所以我們可以嘗試。 – 2012-08-08 14:24:40

更新了我的問題。包括html和css。如果還不夠，那麼我會製作和html頁面並將其上傳到某處。 – Piscean 2012-08-08 14:56:21

如提到的問題，如果我禁用第一個地圖代碼，然後第二個地圖工作正常。請在查看代碼時記住它。感謝您的時間 – Piscean 2012-08-08 14:57:26

此行之後

var map2 = new google.maps.Map(document.getElementById("map_convas_2"), myOptions2);

添加

google.maps.event.trigger(map2, 'resize');

您可能需要稍微向下移動新的代碼行，或設置超時。問題是，.show()需要一些時間來重置DOM中的地圖大小，並且API被告知地圖在設置時仍然具有零大小。因此，您只能獲得最小數量的圖塊，以在左上角顯示零大小的地圖。

來源

2012-08-08 15:01:53

它沒有幫助。如果你看到右邊的角落，Map就在它的正確位置。使用地圖選項。你怎麼看？ – Piscean 2012-08-08 15:11:33

@Piscean如你所說，我認爲示威者是一個好主意。只看到左上角的地圖是由於API沒有爲地圖畫布div獲取正確大小而導致的常見問題。 – 2012-08-08 15:18:18

現在工作正常。我把那行代碼放下了。並開始工作。感謝您的時間和幫助 – Piscean 2012-08-09 14:41:26

<style> 
.map img { background-color: transparent; } 
#map-canvas { width:400px; height:450px; } 
</style>

來源

2012-10-12 06:55:23

+1對於地圖第二張地圖清晰顯示 – 2013-07-20 11:04:39

爲什麼Google Maps JavaScript API v3在我嘗試創建第二個地圖實例時無法正常工作？

回答

相關問題