C#ASP.NET MVC项目和Google Maps：如何使用C#List <>中的值填充JavaScript数组
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了C#ASP.NET MVC项目和Google Maps：如何使用C#List <>中的值填充JavaScript数组，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4653字，纯文字阅读大概需要7分钟。
内容图文
我有一个这样的类：
public class Markers
{
public double latitude { get; set; }
public double longitude { get; set; }
//Constructors and Methods
//(...)
}
在我的控制器上,我有一个带有标记列表的ActionResult,我像这样添加纬度和经度
List<Markers> listM = new List<Markers>(); //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);
现在在视图上,我需要访问数据并填充数组,以便我可以在谷歌地图上显示标记.
如何用列表中的标记填充数组？
@using ProjectName.Models
@model List<Markers>
<html>
<head>...</head>
<body>...</body>
<script type="text/javascript">
//How can I add a GoogleMap Marker ?
var markersArray = [];
@foreach(var item in Model)
{
//can't use google.maps.Marker inside this foreach =(
}
</script>
</html>
注意：这是我通过点击地图在该阵列上添加标记的方法.
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解决方案之后,标记仍未在地图上显示！
<script type="text/javascript">
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)
{
<text>
var locations = google.maps.LatLng('@item.latitude', '@item.longitude', false);
addMarker(locations);
</text>
}
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');
}
</script>
解决方法:
试试这个…..
<script>
var markersArray = [];
var _map = null;
var _c = null;
@foreach(var item in Model)
{
<text>
markersArray.push(new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng('@item.latitude', '@item.longitude', false),
title: 'Whatever title',
map: _map
}));
</text>
}
</script>
第二个问题
我不得不仔细查看你的代码,发现了3个问题……其中一个你已经提到过了.其他的是你复制变量名而你没有实例化一个新对象.现在改变这个….
@foreach(var item in Model)
{
<text>
var locations = google.maps.LatLng('@item.latitude', '@item.longitude', false);
addMarker(locations);
</text>
}
对……
@foreach(var item in Model)
{
<text>
addMarker(new google.maps.LatLng(parseFloat('@item.latitude'), parseFloat('@item.longitude')));
</text>
}
让我知道事情的后续
内容总结
以上是互联网集市为您收集整理的C#ASP.NET MVC项目和Google Maps：如何使用C#List <>中的值填充JavaScript数组全部内容，希望文章能够帮你解决C#ASP.NET MVC项目和Google Maps：如何使用C#List <>中的值填充JavaScript数组所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】