在ASP.NET母版谷歌地图API：为什么留空白？ [英] Google Maps API in ASP.NET Masterpage: why it stays blank?

查看：297 发布时间：2016/6/7 22:04:38 javascript asp.net google-maps

本文介绍了在ASP.NET母版谷歌地图API：为什么留空白？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这个简单的例子Visual Studio的本地主机内开展工作时，在纯HTML：端口服务器

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展性=无/＆GT;
＆LT;风格类型=文/ CSS＆GT;
  HTML {身高：100％}
  车身高度{：100％;保证金：0像素;填充：0像素}
  #map_canvas {身高：100％}
＆LT; /风格＆GT;
＆LT;脚本类型=文/ JavaScript的
    SRC =http://maps.google.com/maps/api/js?sensor=true＆GT;
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    函数初始化（）{
        VAR经纬度=新google.maps.LatLng（-34.397，150.644）;
        VAR myOptions = {
            变焦：8，
            中心：经纬度，
            mapTypeId设为：google.maps.MapTypeId.ROADMAP
        };
        VAR地图=新google.maps.Map（的document.getElementById（map_canvas的）
        myOptions）;
    }＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体的onload =初始化（）＆GT;
  ＆LT; DIV ID =map_canvas的风格=宽度：100％;身高：100％＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

我试图适应在Visual Studio中的ASP.NET 2010默认模板，虽然它运行它不会显示任何地图，为什么？

母版：

 ＆LT;％@主语言=C＃AutoEventWireup =真codeFILE =Site.master.cs继承=SITEMASTER％GT;＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT;头=服务器＆GT;
    ＆LT;标题＆GT;＆LT; /标题＆GT;
    ＆LT;链接HREF =〜/风格/的site.css的rel =stylesheet属性类型=文/ CSS/＆GT;
    ＆LT;风格类型=文/ CSS＆GT;
      HTML {身高：100％}
      车身高度{：100％;保证金：0像素;填充：0像素}
      #map_canvas {身高：100％}
    ＆LT; /风格＆GT;
    ＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展性=无/＆GT;
    ＆LT;脚本类型=文/ JavaScript的
        SRC =http://maps.google.com/maps/api/js?sensor=true＆GT;
    ＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
        函数初始化（）{
            VAR经纬度=新google.maps.LatLng（-34.397，150.644）;
            VAR myOptions = {
                变焦：8，
                中心：经纬度，
                mapTypeId设为：google.maps.MapTypeId.ROADMAP
            };
            VAR地图=新google.maps.Map（的document.getElementById（map_canvas的）
            myOptions）;
        }    ＆LT; / SCRIPT＆GT;
    ＆LT; ASP：的ContentPlaceHolder ID =HeadContent=服务器＆GT;    ＆LT; / ASP：＆的ContentPlaceHolder GT;
＆LT; /头＆GT;
＆LT;身体的onload =初始化（）＆GT;
    ＆LT;形式=服务器＆GT;
    ＆LT; DIV CLASS =页＆GT;
        ＆LT; DIV CLASS =头＆GT;
            ＆LT; DIV CLASS =标题＆GT;
                ＆LT; H1＆GT;
                    谷歌地图在ASP.NET
                ＆LT; / H1＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =loginDisplay＆GT;
                ＆LT; ASP：LoginView ID =HeadLoginView=服务器的EnableViewState =假＆GT;
                    ＆LT; AnonymousTemplate＆GT;
                        [＆LT; A HREF =〜/帐号/的Login.aspxID =HeadLoginStatus=服务器＆GT;登录上述＆lt; / A＆GT; ]
                    ＆LT; / AnonymousTemplate＆GT;
                    ＆LT;＆显示LoggedInTemplate GT;
                        欢迎＆LT;跨度类=大胆＆GT;＆LT; ASP：LoginName将ID =HeadLoginName=服务器/＆GT;＆LT; / SPAN＆GT;！
                        [＆LT; ASP：LoginStatus ID =HeadLoginStatus=服务器LogoutAction =重定向LogoutText =注销LogoutPageUrl =〜//＆GT; ]
                    ＆LT; /＆显示LoggedInTemplate GT;
                ＆LT; / ASP：LoginView＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =明确hideSkiplink＆GT;
                ＆LT; ASP：菜单ID =NavigationMenu=服务器的CssClass =菜单的EnableViewState =假IncludeStyleBlock =false的方向=横向＆GT;
                    ＆LT;项目＆GT;
                        ＆LT; ASP：菜单项NavigateUrl =〜/ Default.aspx的文本=家/＆GT;
                        ＆LT; ASP：菜单项NavigateUrl =〜/ About.aspx文本=关于/＆GT;
                    ＆LT; /项目＆GT;
                ＆LT; / ASP：菜单＆gt;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =主＆GT;
            ＆LT; ASP：的ContentPlaceHolder ID =日程地址搜索Maincontent=服务器/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =清除＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =页脚＆GT;    ＆LT; / DIV＆GT;
    ＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

Default.aspx的：

 ＆LT;％@页标题=主页LANGUAGE =C＃的MasterPageFile =〜/ Site.master母AutoEventWireup =真
    codeFILE =Default.aspx.cs继承=_默认％GT;＆LT; ASP：内容ID =HeaderContent=服务器ContentPlaceHolderID =HeadContent＆GT;＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ID =的BodyContent=服务器ContentPlaceHolderID =日程地址搜索Maincontent＆GT;  ＆LT; DIV ID =map_canvas的风格=宽度：100％;身高：100％＆GT;＆LT; / DIV＆GT;＆LT; / ASP：内容＆GT;

更新：这是呈现的HTML

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;＆LT;标题＆GT;
    首页
＆LT; /标题＆GT;＆LT;链接HREF =样式/的site.css的rel =stylesheet属性类型=文/ CSS/＆GT;
    ＆LT;风格类型=文/ CSS＆GT;
      HTML {身高：100％}
      车身高度{：100％;保证金：0像素;填充：0像素}
      #map_canvas {身高：100％}
    ＆LT; /风格＆GT;
    ＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展性=无/＆GT;
    ＆LT;脚本类型=文/ JavaScript的        SRC =http://maps.google.com/maps/api/js?sensor=true＆GT;
    ＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
        函数初始化（）{
            VAR经纬度=新google.maps.LatLng（-34.397，150.644）;
            VAR myOptions = {
                变焦：8，
                中心：经纬度，
                mapTypeId设为：google.maps.MapTypeId.ROADMAP
            };
            VAR地图=新google.maps.Map（的document.getElementById（map_canvas的）
            myOptions）;
        }    ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体的onload =初始化（）＆GT;
    ＆LT;形式方法=邮报行动=的Default.aspxID =ctl01＆GT;
＆LT; DIV CLASS =aspNetHidden＆GT;
＆LT;输入类型=隐藏的名字=__ VIEWSTATEID =__ VIEWSTATEVALUE =/ wEPDwUKMTY1NDU2MTA1MmRkgEGBoemMtm + / + V6V m9lmIvRj4NCUaPh / xvbFFRPTsmc =/＆GT;
＆LT; / DIV＆GT;
＆LT;脚本src=\"/googlemapstutorial/WebResource.axd?d=pX2KOH15DXBIWd9F3pw0pYRvxH0rCs_7BzgxTRUKsZkV8iILrBf16Um3jfikb78HXD5CWcorG2sj456pwVRsUev4lKFhNxwLEsZ0G3MsXkw1&amp;t=634222671270572046\"类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
    ＆LT; DIV CLASS =页＆GT;
        ＆LT; DIV CLASS =头＆GT;
            ＆LT; DIV CLASS =标题＆GT;
                ＆LT; H1＆GT;
                    谷歌地图在ASP.NET
                ＆LT; / H1＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =loginDisplay＆GT;                        [＆LT; A HREF =帐户/为Login.aspxID =HeadLoginView_HeadLoginStatus＆GT;登录上述＆lt; / A＆GT; ]            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =明确hideSkiplink＆GT;
                ＆LT; A HREF =＃NavigationMenu_SkipLink＆GT;＆LT; IMG ALT =跳过导航链接 src=\"/googlemapstutorial/WebResource.axd?d=TJBKVc8nekHCgPywjGbDmMgRlrAm9FIu3FELc6xCCTlRxYfnY8nfoPOyAs8B8fawdRaonWVsHF9mLU3lY2PCkgjBIN2S1Hne4nX1WfWtaN01&amp;t=634222671270572046\" WIDTH =0HEIGHT =0的风格=边界宽度：0像素; /＆GT;＆下; / A＆GT;＆下;股利类=菜单的id =NavigationMenu＆GT;
    ＆LT; UL类=1级＆GT;
        ＆LT;李＆GT;＆LT;一类=1级的href =Default.aspx的＆GT;首页＆LT; / A＆GT;＆LT; /李＆GT;＆LT;李＆GT;＆LT;一类=1级的href =About.aspx ＆gt;关于＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;＆LT;一个ID =NavigationMenu_SkipLink＆GT;＆LT; / A＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =主＆GT;
  ＆LT; DIV ID =map_canvas的风格=宽度：100％;身高：100％＆GT;＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =清除＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =页脚＆GT;    ＆LT; / DIV＆GT;＆LT;脚本类型=文/ JavaScript的'＆gt;新建Sys.WebForms.Menu（{元素：'NavigationMenu'，disappearAfter：500，方向：水平，一个tabIndex：0，禁用：假}）;＆LT; / SCRIPT＆GT ;＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

谷歌是所有JavaScript，因此它在一个母版页的事实不应该的问题，除非你有本地路径的问题，我没有看到。

我将使用Firefox的错误控制台，看看是否有任何Javascript错误页面加载时。

修改

我认为这是一些奇怪的标记嵌套的问题，但它实际上是您正在使用的百分比为您维度的事实。 '100％'是指使用填充封闭容器空间，但如果容器是空的，我们没有得到一个尺寸。如果你设置你的地图格到一个固定的大小，你会看到你的地图。

This simple example works in pure html when launching within visual studio localhost:port server

<!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>

I tried to adapt to asp.net under visual studio 2010 default template and though it runs it doesn't show any map why ?

Masterpage:

<%@ 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>

Default.aspx:

<%@ 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>

Update: this is the rendered html

<!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>

解决方案

Google is all Javascript, so the fact it's in a Master page shouldn't matter unless you have local path issues, which I don't see.

I would use Firefox's Error Console to see if there are any Javascript errors when the page loads.

EDIT

I thought it was some weird tag nesting issue, but it's actually the fact that you're using percentages for your dimensions. '100%' means use fill the enclosing containers space, but if the container is empty we don't get a size. If you set your map div to a fixed size, you will see your map.

这篇关于在ASP.NET母版谷歌地图API：为什么留空白？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在ASP.NET母版谷歌地图API：为什么留空白？ [英] Google Maps API in ASP.NET Masterpage: why it stays blank?

问题描述

相关文章

C#/.NET最新文章

热门教程

热门工具

登录关闭

在ASP.NET母版谷歌地图API：为什么留空白？ [英] Google Maps API in ASP.NET Masterpage: why it stays blank?

问题描述

相关文章

C#/.NET最新文章

热门教程

热门工具

登录 关闭

登录关闭