1

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

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

4

2 回答 2

1

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

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

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

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

于 2017-05-04T12:19:15.890 回答
1

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

这是解决方案：

  • 在 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();
}

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

于 2018-12-16T21:43:44.630 回答