google-maps-api-3 - 在 ASP.net Web Form 中显示 Google Map API V3

Question

我正在尝试在我的 ASP.net 网络表单页面中显示 Google map 。

javascript如下:

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=xxxxx&sensor=false">
</script>
<script type="text/javascript">
    var map;
    function initialize() {

        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var mapcv = document.getElementById('map-canvas');            

        map = new google.maps.Map(mapcv,
            mapOptions);

    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>

我使用了以下 HTML，如果我将 Div 标签放在表单标签中，它就不起作用。

<form id="form1" runat="server">
    <div id="map-canvas" ></div>
</form>

但是，如果我将 Div 标签移动到表单标签之外，如下所示，它会起作用

<div id="map-canvas" ></div>
<form id="form1" runat="server">        
    </form>

我想将 Div 标签放在表单中。你能帮我怎么做吗？谢谢。

Answer 1

只需设置div的宽度和高度即可查看!您的 map 在那里但不可见:)

<div id="map_canvas" style="width:600px;height:400px"></div>

您还可以在标题中的 css 中设置它们:

 <style>
    html, body, #form1, #map_canvas
    {
        margin: 0;
        padding: 0;
        height: 100%;
    }
</style>