在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

回答

相關問題