在 ASP.Net Webforms 中使用谷歌地图 - 地图不显示答案

【问题标题】：Using Google Maps in ASP.Net Webforms - map not displaying在 ASP.Net Webforms 中使用谷歌地图 - 地图不显示
【发布时间】：2015-10-28 09:20:40
【问题描述】：

我是 .NET 编程的初学者，我正在尝试将 Google 地图放入我的代码中。这是我在关注 this tutorial 的 MultiView 中拥有的用户控件，但我无法让它工作。有人能弄清楚我做错了什么吗？我查看了类似的 SO 问题，但没有找到解决方案 - 我指定了我的 div 宽度和高度，在页面加载时调用初始化函数等。我没有收到编译错误 - 一切正常，div 在那里，它只是不加载地图。我尝试将“runat=server”放在脚本标签中，但这给了我一个编译错误。

相关代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="StoreView.ascx.cs" Inherits="Practice.StoreView" %>
<asp:HiddenField ID="hdStoreName" runat="server" />
<asp:HiddenField ID="hdStateCode" runat="server" />
<div>
    <asp:Button runat="server" ID="btnBackToStatePage" Text="Back to state" OnClick="btnBackToStatePage_Click" /></div>
<div>
    <asp:Label ID="lblStorePageHeader" runat="server" Font-Size="X-Large"></asp:Label></div>
<div>
    <asp:Image runat="server" ID="imgStorefront" ImageUrl="" /></div>
<head>
<title></title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        } 

    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width: 300px; height: 300px; float: right;">
    </div> 
</body>

编辑我只是尝试在 HTML 页面中单独呈现地图，如下所示，它也没有显示在那里。 “This is a page”字样会显示，但地图不会显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

    </script>
</head>
<body>
    <span>This is a page.</span>
    <div id="map_canvas" style="width: 300px; height: 300px; float: right;">
    </div>
</body>
</html>

查看应包含我的地图的 ASPX 页面时的网络选项卡：

查看应包含地图的 HTML 页面时的网络选项卡：

【问题讨论】：

您不会将runat="server" 用于脚本。您只对要嵌入 ASPX 的 C#（或 VB）代码执行此操作（这不是一个好的做法）。检查浏览器的网络和 JavaScript 控制台是否有错误。
@mason 我检查了 JS 控制台，没有显示任何错误 - 它完全是空白的。那里应该有什么吗？我以前从未使用过这个工具。
查看网络标签，看看是否有任何东西正在与 Google 的服务器通信。
为什么按钮和第一个 div 在身体外侧？ html 标签之前的 <!DOCTYPE html> 声明在哪里？ html 标签在哪里？
@Aristos 因为这是一个 ASP.NET 网络表单页面，而不是一个 html 页面。

标签： javascript c# asp.net google-maps

【解决方案1】：

javascript 函数有效，因为我尝试过它并显示了地图。也许您还缺少其他东西？

这是我的确切页面，并且 ![It shows this up ]1

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main.aspx.cs" Inherits="HelpAspx.main" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize() {
           var latlng = new google.maps.LatLng(-34.397, 150.644);
           var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
           };
           var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

    </script>
</head>
<body onload="initialize()">
   <form runat="server">
       <asp:HiddenField ID="hdStoreName" runat="server" />
       <asp:HiddenField ID="hdStateCode" runat="server" />
       <div>
       </div>
       <div>
          <asp:Label ID="lblStorePageHeader" runat="server" Font-Size="X-Large"></asp:Label>
       </div>
       <div>
           <asp:Image runat="server" ID="imgStorefront" ImageUrl="" />
       </div>
       <div id="map_canvas" style="width: 300px; height: 300px; float: right;">
       </div>
   </form>
</body>
</html>

【讨论】：

当我像您所做的那样将我的 ASP 控件放在正文内的表单标记中时，视图不再加载。这个文件是 .ascx。
我尝试将谷歌地图脚本放在一个常规的 HTML 文件中，但它也没有呈现在那里。有关代码，请参阅我编辑的问题。