Question

我知道，这个问题已被多次询问，我尝试了所有可能的解决方案，包括：

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

，但没有一个适合我。

因此，我需要加载带有隐藏地图的页面，并仅在用户点击链接“显示地图”时显示地图。问题是地图不会以完整尺寸显示。它显示为181x186像素大小，但其余只是一个灰色方块。

This is my script: 

<script type="text/javascript"> 
function toggle() {
var ele = document.getElementById("map_canvas");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show map";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide map";
}
} 
</script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady"></script>
<script type="text/javascript">
function handleApiReady() {
var myLatlng = new google.maps.LatLng(<?php echo $latitude;?>, <?php echo $longitude;?>);
var myOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $latitude;?>, <?php echo $longitude;?>),
draggable: true,
icon: 'http://google-maps-icons.googlecode.com/files/factory.png', 
map: map
});

google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latitude").value = this.getPosition().lat();
document.getElementById("longitude").value = this.getPosition().lng();
});
}
</script>

<div id="map_canvas" style="display:none;width:760px;height:420px;"></div>

Answer 1

这对我有用：

<script type="text/javascript"> 
function toggle() {
  var ele = document.getElementById("map_canvas");
  var text = document.getElementById("displayText");
  if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "Show map";
  }
  else {
    ele.style.display = "block";
    text.innerHTML = "Hide map";
    google.maps.event.trigger(map, "resize");
    map.setCenter(myLatlng);
  }
} 
</script>

如果我制作myLatlng并映射全局。

working example

隐藏div中的Google地图V.3不会加载所有内容

1 个答案: