javascript - 如何在 ASP.NET C# 中显示谷歌地图

Question

我正在努力将 google map 控件添加到 ASP.NET C# 页面中。我已经从谷歌获得了 API key ，我刚刚测试了该页面，但似乎 map 没有显示。我的最终结果是使用纬度和经度的文本框进行输入，单击提交按钮后， map 会将我带到指定的位置。在前端，我有这个:

<script>
    var map;
    function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(48.1293954, 11.556663), // Munich Germany
            zoom: 10
        });
    }

    function newLocation(newLat, newLng) {
        map.setCenter({
            lat: newLat,
            lng: newLng
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<form id="form1" runat="server">
    <asp:ScriptManager ID="sManager" runat="server" />
    <asp:UpdatePanel ID="pnlTest" runat="server">
        <ContentTemplate>
            <div style="height: 60%;" id="map"></div>

            <asp:TextBox ID="txtLat" runat="server" />
            <asp:TextBox ID="txtLong" runat="server" />
            <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

我还没有完成按钮单击事件，因为我想先完成以上内容。

Answer 1

问题是渲染 map 时您的 UpdatePanel 没有高度。如果您为控件指定高度，则 map 将可见:

<asp:UpdatePanel ID="pnlTest" runat="server" style="height:400px;">

Google documentation表示您必须明确设置高度:

Note that divs usually take their width from their containing element, and empty divs usually have 0 height. For this reason, you must always set a height on the div explicitly.