使用mvc模型在Google Maps API v3上顯示標記

Question

我試圖發送IEnumerable模型，該模型包含要在我的網站上顯示的Google地圖上顯示的經度和緯度值。

下面是我用我的視圖來顯示地圖的代碼：我目前正在與虛擬數據預填充它

@model IEnumerable<ProjectName.Models.modelname> 
@{ 
    ViewBag.Title = "Map View"; 
} 

<script src="http://maps.google.com/maps/api/js?key=My-API-Key" type="text/javascript"></script> 


<style> 
    #map_canvas img { 
    max-width: none; 
    } 
</style> 


<style> 
    .infoDiv { 
    height: 200px; 
    width: 300px; 
    -webkit-user-select: none; 
    background-color: white; 
} 
</style> 

<h2>Map</h2> <a class="btn btn-default" href="/Tags/Create">Create Tag &raquo;</a> 
<hr /> 

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


@section scripts { 
<section class="scripts"> 

    <script type="text/javascript"> 


$(document).ready(function() { 
    Initialize(); 
}); 


function Initialize() { 


    google.maps.visualRefresh = true; 
    var Liverpool = new google.maps.LatLng(-26.71452, 27.097047); 


    var mapOptions = { 
     zoom: 14, 
     center: Liverpool, 
     mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP 
    }; 


    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

    var myLatlng = new google.maps.LatLng(-26.674359 , 27.095391); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Tate Gallery' 
    }); 


    marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 


    var data = [ 
       { "Id": 1, "PlaceName": "Liverpool Museum", "OpeningHours":"9-5, M-F","GeoLong": "53.410146", "GeoLat": "-2.979919" }, 
       { "Id": 2, "PlaceName": "Merseyside Maritime Museum ", "OpeningHours": "9-1,2-5, M-F", "GeoLong": "53.401217", "GeoLat": "-2.993052" }, 
       { "Id": 3, "PlaceName": "Walker Art Gallery", "OpeningHours": "9-7, M-F", "GeoLong": "53.409839", "GeoLat": "-2.979447" }, 
       { "Id": 4, "PlaceName": "National Conservation Centre", "OpeningHours": "10-6, M-F", "GeoLong": "53.407511", "GeoLat": "-2.984683" } 
      ]; 


    $.each(data, function (i, item) { 
     var marker = new google.maps.Marker({ 
      'position': new google.maps.LatLng(item.GeoLong, item.GeoLat), 
      'map': map, 
      'title': item.PlaceName 
     }); 


     marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png') 


     var infowindow = new google.maps.InfoWindow({ 
      content: "<div class='infoDiv'><h2>" + item.PlaceName + "</h2>" + "<div><h4>Opening hours: " + item.OpeningHours + "</h4></div></div>" 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map, marker); 
     }); 

    }) 
} 


    </script> 
</section> 
} 

，但我無法從我的模型檢索數據。

我將如何使用模型，因爲我無法在腳本中運行foreach循環？

提前致謝！

找到答案！我需要使用這種方法從我的控制器返回我的JSON數據：

public ActionResult MapView() 
{ 
    var tags = db.Tags.ToList(); 

    var jsonTags = from x in tags 
        select new Tags 
        { 
         GeoName = x.GeoName, 
         GeoLat = x.GeoLat, 
         GeoLong = x.GeoLong 
        }; 

    return View(jsonTags); 
} 

感謝所有幫助！ Json.Encode也是需要的！

Answer 1

對你的看法Json.Encode可以將列表轉換成JSON數組

RAZOR

@Html.Raw(Json.Encode(YourModel)) 

ASPX

<%=html.Raw(Json.Encode(YourModel)%> 

-

var data = <%=html.Raw(Json.Encode(YourModel)%>;