Не отображается Google Maps v3 в MVC 3 - PullRequest
Новая
       9

Не отображается Google Maps v3 в MVC 3

0 голосов
/ 13 марта 2012

Заранее спасибо за вашу помощь. Я пытаюсь использовать API Google Maps с новой бритвой mvc3, однако, когда я запускаю свой код, ничего не отображается, кроме тега. Однако, если я создаю HTML-файл, я могу получить карту для отображения. Я уверен, что буду биться в голову тем, насколько очевиден ответ, но последние пару дней я смотрел на этот код и не мог понять, как заставить его работать в VS. Пожалуйста, помогите:

У меня есть в _Layout.cshtml 

<!DOCTYPE html>
<html>
 <head>
  <title>@ViewBag.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
  <pre lang="aspnet">@RenderSection("Scripts", false)
  <style type="text/css"> 
    @RenderSection("Styles", false)
  </style>
 </head>

  <body>
    @RenderBody()
  </body>
</html>

В моем Index.cshtml: 

@{ 
  ViewBag.Title = "MVC 3 and Google Maps"; 
} 
@section Scripts { 
  <script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
} 
@section Styles { 
  html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 80% } 
} 
<script type="text/javascript">
  function initialize() {
    //var latlng = new google.maps.LatLng(40.716948, -74.003563);
    var options = { center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById
        ("map_canvas"), options);
 }
 $(function () {
    initialize();
 });      
</script> 
<h2>Hello, Google Maps</h2>
<div id="map_canvas" style="width:80%; height:80%"></div>

Это все, с чем я сейчас работаю, надеюсь, один из вас покажет мне, что мне не хватает. Я уже просмотрел несколько фрагментов похожего кода, но по какой-то причине в VS он не хочет отображать карты Google, но, как я уже сказал, мои данные отображаются. Спасибо за вашу помощь!

Ответы [ 3 ]

1 голос
/ 13 марта 2012

Насколько я могу судить, причиной проблемы является предварительный тег в вашем _layout.cshtml. Я сделал быстрый макет кода в виде простой HTML-страницы (поскольку у меня не было css, я просто удалил эту ссылку и добавил отдельную ссылку на jquery через Google CDN: 

    <!DOCTYPE html>
<html>
 <head>
  <title>@ViewBag.Title</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  

  <style type="text/css"> 
     html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 80% }
  </style>

 </head>

  <body>
 <script type="text/javascript">
  function initialize() {
    //var latlng = new google.maps.LatLng(40.716948, -74.003563);
    var options = { center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById
        ("map_canvas"), options);
 }
 $(function () {
    initialize();
 });      
</script>
<h2>Hello, Google Maps</h2>
<div id="map_canvas" style="width:80%; height:80%"></div>

  </body>
</html>

Как только я удалил предварительный тег, он работал отлично.

0 голосов
/ 14 марта 2012

Я понял, что это глупая синтаксическая ошибка, как я и предполагал.В теге pre отсутствует тег pre.Спасибо вам, ребята, за вашу помощь. 

<code><pre lang="aspnet">@RenderSection("Scripts", false)
0 голосов
/ 13 марта 2012

Пожалуйста, определите DIV <div id="map_canvas" style="width:80%; height:80%"></div> перед тегом scrit. Это будет работать. Вам нужно переписать код, как показано ниже. 

@{ 
  ViewBag.Title = "MVC 3 and Google Maps"; 
} 
@section Scripts { 
  <script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
} 
@section Styles { 
  html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 80% } 
} 
<h2>Hello, Google Maps</h2>
<div id="map_canvas" style="width:80%; height:80%"></div>
<script type="text/javascript">
  function initialize() {
    //var latlng = new google.maps.LatLng(40.716948, -74.003563);
    var options = { center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById
        ("map_canvas"), options);
 }
 $(function () {
    initialize();
 });      
</script>
...