如何在 ASP.NET C# 中显示 google 地图

Question

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

<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

问题是您的UpdatePanel在渲染地图时没有高度。如果您为控件指定高度，地图将可见：

<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.

Answer 2

就我而言，我试图在更新面板内的模态弹出对话框中显示地图。棘手！

这是解决方案：

在 aspx 表单中（在模态弹出面板内）我添加了一个 div 像这样

<div id="map" style="width: 600px; height: 400px; margin-right: auto; margin-left: auto;"></div>

也是aspx形式，但是在更新面板之后我添加了以下脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=(YOUR_API_KEY_Here)&sensor=false"></script>

还有一个脚本：

<script type="text/javascript">
var map;
function RenderTheMap(lat, long) {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(lat, long), 
        zoom: 9
    });

    var latlng = new google.maps.LatLng(lat, long);
    new google.maps.Marker({
        position: latlng,
        map: map
    });
}

在后面的c#代码中我添加了以下函数：

private void ShowMap(string Address_Lat, string Address_Long)
{
    ScriptManager.RegisterStartupScript(
    UpdatePanel1,
    this.GetType(),
    "RenderMap",
    "RenderTheMap(" + Address_Lat + ", " + Address_Long + ");",
    true);
    MapPanel_ModalPopupExtender.Show();
}

对于任何想要在更新面板中添加 Google 地图作为弹出模块的人

如何在 ASP.NET C# 中显示 google 地图

How to show google maps in ASP.NET C#

javascript

c#

google-maps

updatepanel

registerstartupscript