ASP.NET Web用户控件中的Google Maps API 3

Question

加载我的页面时，没有显示地图。 控制台中也没有错误。

如果我将两个JS脚本标签（和内容）以及2个div容器都放在一起，然后将它们放在Default.aspx中的form标签上方，...就可以了。

我知道自定义控件正在加载，因为如果我在一个简单的文本框中放它就会显示出来。

我有Default.aspx页面

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="DnnTest._Default" %>
<%@ Register Src="~/DnnTestView.ascx" TagPrefix="uc1" TagName="DnnTestView" %>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <uc1:DnnTestView runat="server" id="DnnTestView" />
            </div>
        </form>
    </body>
</html>

和自定义用户控件 “ DnnTestView.ascx”

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="DnnTestView.ascx.vb" Inherits="DnnTest.DnnTestView" %>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[our key here]&sensor=true">
</script>

<script type="text/javascript">
 var lat = 41.4934579;
    var lng = -90.50442090000001;
    var zoom = 14;

    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(lat, lng),
            zoom: 16
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            title: "ARA"
        });

        marker.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', init);
</script>

<div id="map-contanier" style="width: 100%; height: 100%;">
    <div id="map-canvas"/>
</div>

Answer 1

＃map-container与地图的大小无关。

＃map-canvas的高度为0。 因此，将style =“ height：100％”设置为该标签

Answer 2

由于某种原因，在＃map-canvas上使用百分比高度对我不起作用。 我必须将其设置为像素。

height:100px;

ASP.NET Web用户控件中的Google Maps API 3

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-01-02 20:22:40

解决方案2
0 2014-03-03 01:29:42

ASP.NET Web用户控件中的Google Maps API 3

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-01-02 20:22:40

解决方案2 0 2014-03-03 01:29:42

解决方案1
1 已采纳 2014-01-02 20:22:40

解决方案2
0 2014-03-03 01:29:42