Javascript ASP.NET母版中的谷歌地图API：为什么保持空白？_Javascript_Asp.net_Google Maps

Javascript ASP.NET母版中的谷歌地图API：为什么保持空白？

javascript asp.net google-maps

Javascript ASP.NET母版中的谷歌地图API：为什么保持空白？,javascript,asp.net,google-maps,Javascript,Asp.net,Google Maps,当在VisualStudioLocalHost:PortServer中启动时，这个简单的示例在纯html中工作 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height

当在VisualStudioLocalHost:PortServer中启动时，这个简单的示例在纯html中工作

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</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:100%; height:100%"></div>
</body>
</html>


html{高度：100%}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{高度：100%}
函数初始化（）{
var latlng=新的google.maps.latlng（-34.397150.644）；
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
}

我尝试在visual studio 2010默认模板下适应asp.net，虽然它运行，但没有显示任何地图为什么

母版页：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
    </style>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=true">
    </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>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">

    </asp:ContentPlaceHolder>
</head>
<body onload="initialize()">
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    Google Maps in ASP.NET
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

    </div>
    </form>
</body>
</html>


html{高度：100%}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{高度：100%}
函数初始化（）{
var latlng=新的google.maps.latlng（-34.397150.644）；
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
}
]
欢迎]



新的Sys.WebForms.Menu（{element:'NavigationMenu'，discosearafter:500，orientation:'horizontal'，tabIndex:0，disabled:false}）；

谷歌全是Javascript，所以它在母版页中的事实应该无关紧要，除非你有本地路径问题，我看不到

我会使用Firefox的错误控制台来查看页面加载时是否存在Javascript错误

编辑

我认为这是一个奇怪的标签嵌套问题，但事实上，你在维度中使用了百分比“100%”表示使用填充封闭容器空间，但如果容器为空，则我们无法获得大小。如果您将地图div设置为固定大小，您将看到您的地图。

我认为问题在于您是对的，我忘记了，所以我在上面更正了，但仍然为空。伙计-这到底是什么？=><代码>新建Sys.WebForms.Menu（{element:'NavigationMenu'，discosearafter:500，orientation:'horizontal'，tabIndex:0，disabled:false}）这是我在我的html中为map_canvas DIV得到的：``我不知道为什么得到这个。如果我关闭

位置

和

溢出

参数，它现在显示。。六羟甲基三聚氰胺六甲醚。。。这个css是从google maps继承来的吗？这个css必须来自visual studio 2010中的默认web模板，因为它不在html源代码中。所以我做了，没有错误。我已经在上面发布了呈现的html，也在上面

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

  <div id="map_canvas" style="width:100%; height:100%"></div>

</asp:Content>

<!DOCTYPE html> 
<html> 
<head><title> 
    Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
    </style> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <script type="text/javascript"

        src="http://maps.google.com/maps/api/js?sensor=true"> 
    </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 method="post" action="default.aspx" id="ctl01"> 
<div class="aspNetHidden"> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkgEGBoemMtm+/v6V+m9lmIvRj4NCUaPh/xvbFFRPTsmc=" /> 
</div> 


<script src="/googlemapstutorial/WebResource.axd?d=pX2KOH15DXBIWd9F3pw0pYRvxH0rCs_7BzgxTRUKsZkV8iILrBf16Um3jfikb78HXD5CWcorG2sj456pwVRsUev4lKFhNxwLEsZ0G3MsXkw1&amp;t=634222671270572046" type="text/javascript"></script> 
    <div class="page"> 
        <div class="header"> 
            <div class="title"> 
                <h1> 
                    Google Maps in ASP.NET
                </h1> 
            </div> 
            <div class="loginDisplay"> 

                        [ <a href="Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In</a> ]

            </div> 
            <div class="clear hideSkiplink"> 
                <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/googlemapstutorial/WebResource.axd?d=TJBKVc8nekHCgPywjGbDmMgRlrAm9FIu3FELc6xCCTlRxYfnY8nfoPOyAs8B8fawdRaonWVsHF9mLU3lY2PCkgjBIN2S1Hne4nX1WfWtaN01&amp;t=634222671270572046" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu"> 
    <ul class="level1"> 
        <li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li> 
    </ul> 
</div><a id="NavigationMenu_SkipLink"></a> 
            </div> 
        </div> 
        <div class="main"> 


  <div id="map_canvas" style="width:100%; height:100%"></div> 


        </div> 
        <div class="clear"> 
        </div> 
    </div> 
    <div class="footer"> 

    </div> 

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form> 
</body> 
</html>