Google Maps API в ASP.NET Masterpage: почему он остается пустым? - PullRequest
Новая
       5

Google Maps API в ASP.NET Masterpage: почему он остается пустым?

3 голосов
/ 10 октября 2010

Этот простой пример работает на чистом html при запуске в Visual Studio Localhost: сервер портов 

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

Я попытался адаптироваться к asp.net под шаблоном Visual Studio 2010 по умолчанию, и хотя он работает, он этого не делаетпоказать любую карту, почему?

Мастер-страница: 

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

Обновление: это визуализированный 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>

1 Ответ

5 голосов
/ 10 октября 2010

Google - это весь Javascript, поэтому тот факт, что он находится на главной странице, не должен иметь значения, если у вас нет проблем с локальными путями, которых я не вижу.

Я бы использовал Консоль ошибок Firefox, чтобы увидеть, есть ликакие-либо ошибки Javascript при загрузке страницы.

РЕДАКТИРОВАТЬ

Я думал, что это была какая-то странная проблема с вложением тегов, но на самом деле вы используете проценты дляваши размеры.«100%» означает «использовать» заполнить пространство вмещающих контейнеров, но если контейнер пуст, мы не получим размер.Если вы установите для карты div фиксированный размер, вы увидите свою карту.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...