谷歌地圖爲asp.net mvc 3

Question

我期待將googlemaps整合到我的asp.net mvc 3網站？

我找到了一些asp.net webforms的鏈接，但沒有找到asp.net mvc 3的鏈接？ 有人可以給我一個鏈接或代碼示例？

Answer 1

這個JavaScript添加到您的網頁頭（我假定你已經添加的JQuery）：

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

那麼這個div到您的視圖的身體：

<div id="map_canvas" style="width:200px; height:200px; "></div> 

然後添加這個腳本塊來控制地圖

<script type="text/javascript"> 
function initialize() { 
    var latLng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude); 
    var myOptions = {zoom: 7, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 
$(document).ready(function() {initialize();}); 
</script> 

請注意，經度和緯度來自模型，視圖寫入我s出來的JavaScript。

Answer 2

谷歌地圖都是關於JavaScript的，而不是關於應用程序的服務器端。您只需使用ASP.NET版本的代碼 - 關鍵是如何爲Google地圖創建您的js文件。

Answer 3

你傳遞的數據是正確的？如果我想從我的sql數據庫傳遞數據呢？我該怎麼辦？我總是收到一個編譯錯誤。 「CS1061：'System.Collections.Generic.IEnumerable'不包含'longitude'的定義，並且沒有找到接受'System.Collections.Generic.IEnumerable'類型的第一個參數的擴展方法'longitude'缺少使用指令或程序集引用？）「

這是我的代碼。 @model IEnumerable

@{ 
     ViewBag.Title = "MVC 3 and Google Maps"; 
    } 

    @section Scripts { 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    } 

    @section Styles { 
     html { height: 80% } 
     body { height: 80%; 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(@Model.longitude, @Model.latitude); 
      var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), options); 
      //google.maps.event.trigger(map, 'resize'); 
     } 

     $(function() { 
      initialize(); 
     }); 

    </script>