C＃ASP.NET MVC项目和Google Maps：如何使用C＃List 中的值填充JavaScript数组

我有这样一个类：

public class Markers { public double latitude { get; set; } public double longitude { get; set; } //Constructors and Methods //(...) } 

在我的控制器上，我有一个带有标记列表的ActionResult，我像这样添加纬度和经度

  List listM = new List(); //NOTE: this is outside of my ActionResult, no problem with that. //(...) listM.Add(new Markers(value[0], value[1])); //NOTE: value[0] is my lat and value[1] is my longitude //(...) 

最后我将我的列表返回到视图：

 return (listM); 

现在在视图上，我需要访问数据并填充数组，以便我可以在谷歌地图上显示标记。

如何用我的列表中的位置lat中的标记来填充数组？

 @using ProjectName.Models @model List  ... ...  //How can I add a GoogleMap Marker ? var markersArray = []; @foreach(var item in Model) { //can't use google.maps.Marker inside this foreach =( }   

注意：这是我通过点击地图在该arrays上添加标记的方法。

 function addMarker(location) { var marker = new google.maps.Marker({ draggable: true, animation: google.maps.Animation.DROP, position: location, title: 'Bomb', map: map, icon: bomb }); markersArray.push(marker); } 

问题2：在@Leo解决方案之后，标记仍未在地图上显示！

   var map; var geocoder; var markersArray = []; var geoMarker; var bomb = new google.maps.MarkerImage('Content/Images/Pins/bomb.png', new google.maps.Size(32, 37), new google.maps.Point(0, 0), new google.maps.Point(22, 44) ); function initialize() { var mapOptions = { center: new google.maps.LatLng(41.287739, -7.738992), zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); @foreach(var item in Model) {  var locations = google.maps.LatLng('@item.latitude', '@item.longitude', false); addMarker(locations);  } geocoder = new google.maps.Geocoder(); for (var i = 0; i < markersArray.length; i++) { markersArray[i].setMap(map); } geoMarker = new GeolocationMarker(map); geoMarker.setCircleOptions({ fillColor: '#808080' }); google.maps.event.addListenerOnce(geoMarker, 'position_changed', function () { map.setCenter(this.getPosition()); map.fitBounds(this.getBounds()); }); google.maps.event.addListener(geoMarker, 'geolocation_error', function (e) { alert('There was an error obtaining your position. Message: ' + e.message); }); geoMarker.setMap(map); google.maps.event.addDomListener(window, 'load', initialize); google.maps.event.addListener(map, 'click', function (event) { addMarker(event.latLng); }); google.maps.event.addListener(map, 'zoom_changed', function () { var zoomLevel = map.getZoom(); //map.setCenter(myLatLng); document.getElementById('mapzoom').innerHTML = 'Zoom: ' + zoomLevel; }); } function showAddress() { alert("Vai navegar para outro endereço!"); var address = document.getElementById('txtAddress').value; geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: mp, position: results[0].geometry.location }); } else { alert('error: ' + status); } }); } function addMarker(location) { var marker = new google.maps.Marker({ draggable: true, animation: google.maps.Animation.DROP, position: location, title: 'Bomba', map: map, icon: bomb }); markersArray.push(marker); } function setAllMap(map) { for (var i = 0; i < markersArray.length; i++) { markersArray[i].setMap(map); } } function clearMarkers() { setAllMap(null); } function showMarkers() { setAllMap(map); } function deleteMarkers() { clearMarkers(); markersArray = []; } function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; if (!navigator.geolocation) { alert('Your browser does not support geolocation'); }  

Answer 1

试试这个…..

第二个问题

我不得不仔细查看你的代码，发现了3个问题……其中一个你已经提到过了。 其他的是你复制变量名而你没有实例化一个新对象。 现在改变这个….

  @foreach(var item in Model) {  var locations = google.maps.LatLng('@item.latitude', '@item.longitude', false); addMarker(locations);  } 

对……

  @foreach(var item in Model) {  addMarker(new google.maps.LatLng(parseFloat('@item.latitude'), parseFloat('@item.longitude')));  } 

让我知道事情的后续