javascript - 谷歌地图不显示

Question

我一直在使用 Google map API v.3 时遇到问题。

我的 Canvas 声明如下

 <div id="map_canvas" style="width:
 50%; height: 50%; margin-left: auto;
 margin-right: auto">

在我的 Javascript 函数中

var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

一切正常。

但是，当我将 map 放在类似这样的表单中时

<form id="_frm" runat="server">
    <table>
        .
        .
        .
    </table>
    <div id="map_canvas" style="width: 50%; height: 50%; margin-left: auto; margin-right: auto">
    </div>
    <table>
        .
        .
        .        
    </table>
    </form>

如果不生成 JS 错误，则 map 不会显示。 我将 Google map 的路径更改为

var mydiv=document.forms[0].getElementsByTagName("div")[2];

并添加了一条警报语句以查看 ID。所以现在我有

var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROAD    
}

var mydiv=document.forms[0].getElementsByTagName("div")[2];
alert(mydiv.id);
var map = new google.maps.Map(mydiv , myOptions);

虽然警报语句显示 map_canvas，但 map 仍然不会显示。

有什么帮助吗？

Answer 1

尝试为您的 map div 指定明确的尺寸:

<div id="map_canvas" style="width:200px; height: 200px; margin-left: auto;
    margin-right: auto">

可能只是您的 div 高度为 0px/宽度为 0px，这就是它没有显示的原因。