1

在我的网络应用程序中，我使用的是 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');
}
 });

两个 div 的 HTML 都是

 <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;
 }

单击按钮后，将显示第二张地图，但未正确显示。我附上了第一张和第二张地图的截图。如果我评论第一个地图实例代码，那么第二个地图工作正常。这意味着当我创建第二个地图实例时出现问题。有谁知道为什么第二张地图不行以及如何解决这个问题？

第一张地图

第二张地图

4

2 回答 2

1

在这条线之后

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

添加

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

 
您可能需要将该新行稍微向下移动代码，或设置超时。问题是.show()需要一些时间来重置 DOM 中的地图大小，并且 API 被告知地图在设置时仍然具有零大小。因此，您只能获得最小数量的图块以在左上角显示零大小的地图。

于 2012-08-08T15:01:53.603 回答
1 
<style>
.map img { background-color: transparent; }
#map-canvas { width:400px; height:450px; }
</style>
于 2012-10-12T06:55:23.883 回答