在我的网络应用程序中,我使用的是Google Maps JavaScript API v3。在网页中,我使用以下代码创建了Google地图:
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;
}
单击按钮后,会显示第二张地图,但无法正确显示。我附上第一张和第二张地图的截图。如果我评论第一个地图实例代码,那么第二个地图工作正常。这意味着当我创建第二个地图实例时会出现问题。有谁知道为什么第二张地图不行以及如何解决这个问题?
答案 0 :(得分:1)
此行之后
var map2 = new google.maps.Map(document.getElementById("map_convas_2"), myOptions2);
添加
google.maps.event.trigger(map2, 'resize');
您可能需要稍微向下移动代码中的新行,或设置超时。问题是.show()
需要一些时间来重置DOM中的地图大小,并且API被告知地图在设置时仍然没有大小。因此,您只能获得最小数量的图块,以在左上角显示零尺寸地图。
答案 1 :(得分:1)
<style>
.map img { background-color: transparent; }
#map-canvas { width:400px; height:450px; }
</style>