在MVC 3中不显示Google Maps v3

本文关键字：Google Maps v3 显示 MVC | 更新日期: 2023-09-27 18:27:29

提前感谢您的帮助。我正试图将谷歌地图api与新的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.chtml:中

@{ 
  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中它不想显示谷歌地图，但正如我所说，我的确实会被显示。谢谢你的帮助！

在MVC 3中不显示Google Maps v3

据我所知，导致问题的原因是_layout.cshtml中的预标记。我将代码快速模拟为一个纯HTML页面（由于我没有css，我只是删除了该引用，并通过谷歌CDN添加了一个单独的jquery引用：

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

一旦我删除了预标签，它就完美地工作了。

请在您的scrit标记之前定义div <div id="map_canvas" style="width:80%; height:80%"></div>。它会起作用的。您需要重写代码，如下所示。

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

我发现了，这是一个愚蠢的语法错误。pre标记缺少它的pre-end标记。谢谢你们的帮助。

<pre lang="aspnet">@RenderSection("Scripts", false)</pre>
相关文章：