在MVC 3中不显示Google Maps v3

非常感谢您的帮助。我试图用新的mvc3剃须刀使用谷歌地图api，但是当我去运行我的代码时，除了标签外，没有任何东西正在显示。但是，如果我创建一个html文件，我可以让地图显示出来。我确信我会对答案的答案有多明显，但在过去的几天里，我一直在研究这段代码，但一直无法弄清楚如何让它在VS中工作。请帮助：在MVC 3中不显示Google Maps v3

我在_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它不想显示谷歌地图，但就像我说我的显示。谢谢你的帮助！

来源

2012-03-13 4everAStudent

我想通了，这是一个愚蠢的语法错误，我想这将是该预标签缺少它的前结束标签。谢谢你们的帮助。

<pre lang="aspnet">@RenderSection("Scripts", false)</pre>

来源

2012-03-14 01:51:22 4everAStudent

请在您的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>

来源

2012-03-13 04:40:27

谢谢你的帮助，但我已经试过了，没有运气。 – 4everAStudent 2012-03-13 23:11:41

据我所知，导致问题的原因是_layout.cshtml中的pre标签。我做的代码作为直接的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>

前期标签，它的工作完美。

来源

2012-03-13 04:43:56 javram

我试过去掉预标签，除了那时我得到一个错误消息，说'System.Web.HttpException：以下部分已被定义，但尚未呈现布局页面〜/ Views/Shared/_Layout.cshtml“：”脚本“。所以我需要保持它，任何想法？ – 4everAStudent 2012-03-13 23:13:22

在MVC 3中不显示Google Maps v3

回答

相关问题