如何在 ASP.NET C# 中显示谷歌地图答案

【问题标题】：How to show google maps in ASP.NET C#如何在 ASP.NET C# 中显示谷歌地图
【发布时间】：2017-05-04 11:46:29
【问题描述】：

我正在努力将谷歌地图控件添加到 ASP.NET C# 页面中。我从谷歌获得了 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>

我还没有完成按钮点击事件，因为我想先完成上述操作。

【问题讨论】：

您能否更新示例以显示您正在加载的 Google API 库？
我只用这个。
这可能是问题所在。您是否遇到“未定义 google”的 JavaScript 错误？
实际上没有。如果我将 "
" 放在表单标签中但在更新面板之外，则地图会显示。但是，考虑到我未来计划让点击事件上的提交按钮将地图移动到指定位置，我认为在更新面板中包含这个更理想？

标签： javascript c# google-maps updatepanel registerstartupscript

【解决方案1】：

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

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

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

请注意，div 通常从其包含元素中获取宽度，而空 div 通常具有 0 高度。因此，您必须始终明确地在 div 上设置高度。

【讨论】：

我试图投票，如果这是你要求的，但它说我不能。我该怎么做？
赞成/反对票计数器下方有一个灰色复选标记。这会将响应标记为答案。

【解决方案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();
}

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

【讨论】：