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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (152)

我正在努力将谷歌地图控件添加到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>

我还没有完成按钮点击事件,因为我想首先得到上面的内容。

提问于
用户回答回答于

问题UpdatePanel是渲染地图时没有高度。如果为控件指定高度,则地图将可见:

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

有谷歌文档说,你必须明确地设置一个高度

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

用户回答回答于

就我而言,我试图在更新面板内的模态弹出对话框中显示地图。但很难!

这是解决方案:

  • 在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地图作为弹出模块

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励