本文介绍了C＃的ASP.NET MVC项目和谷歌地图：如何填写JavaScript数组与C＃列表与LT值;＆GT;的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个这样的类：
公共类标记
{
公共双纬度{搞定;组; }
公共双经度{搞定;组; } //构造函数和方法
//（...）
}
在我的控制器我有标记列表一个ActionResult，我添加经纬度这样
列表＆LT;标志物GT; listM =新的List＆LT;标志物GT;（）; //注意：这是我的ActionResult，与没有问题之外。
//（...）
listM.Add（新标记（值[0]，价值[1]））; //注意：值[0]是我的纬度和值[1]是我的经度
//（...）
和结束时我就按照列表返回查看：
收益率（listM）;
现在的查看，我需要访问的数据，并填充数组，所以我可以显示我的谷歌地图上的标记。
如何与位置标记填充数组纬度，经度从我的名单？
@using ProjectName.Models
@model名单＆LT;标志物GT;＆LT; HTML和GT;
＆LT; HEAD＆GT; ...＆LT; /头＆GT;
＆LT;身体GT; ...＆LT; /身体GT;
＆LT;脚本类型=文/ JavaScript的＆GT;//我如何添加一个GoogleMap的标记？
变种markersArray = [];
@foreach（以型号VAR项）
{
//不能使用此google.maps.Marker =的foreach里面（
}＆LT; / SCRIPT＆GT;
＆LT; / HTML＆GT;
注意：这是我如何添加标记的阵列上与地图上点击
函数addMarker（位置）{
VAR的标记=新google.maps.Marker（{
拖动：真实，
动画：google.maps.Animation.DROP，
位置：位置，
标题：'炸弹'，
地图：地图，
图示：炸弹
}）;
markersArray.push（标记）;
}
问题2：
标记仍然不显示在@Leo解决方案后的地图！
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR地图;
VAR地理codeR;
变种markersArray = [];
VAR geoMarker; VAR炸弹=新google.maps.MarkerImage（'内容/图片/销/ bomb.png'，
新为google.maps.Size（32，37），
新google.maps.Point（0，0），
新google.maps.Point（22，44）
）; 函数初始化（）{
VAR的MapOptions = {
中心：新google.maps.LatLng（41.287739，-7.738992）
变焦：16，
mapTypeId设为：google.maps.MapTypeId.ROADMAP，
};
地图=新google.maps.Map（的document.getElementById（地图画布）的MapOptions）;
@foreach（以型号VAR项）
{
＆LT;文字和GT;
VAR位置= google.maps.LatLng（'@ item.latitude'，'@ item.longitude'，FALSE）;
addMarker（处）;
＆LT; /文字和GT;
} 地理codeR =新google.maps.Geo codeR（）; 对于（VAR I = 0; I＆LT; markersArray.length;我++）{
markersArray [I] .setMap（图）
}
geoMarker =新GeolocationMarker（图）
geoMarker.setCircleOptions（{填充颜色：'＃808080'}）;
google.maps.event.addListenerOnce（geoMarker，'position_changed'，函数（）{
map.setCenter（this.getPosition（））;
map.fitBounds（this.getBounds（））;
}）;
google.maps.event.addListener（geoMarker，'geolocation_error'功能（E）{
警报（'发生错误的获取位置信息：'+ e.message）;
}）; geoMarker.setMap（地图）; google.maps.event.addDomListener（窗口'负荷'，初始化）;
google.maps.event.addListener（地图，'点击'，功能（事件）{
addMarker（event.latLng）;
}）;
google.maps.event.addListener（地图部分zoom_changed'，函数（）{ 变种当zoomLevel = = map.getZoom（）;
//map.setCenter(myLatLng）;
的document.getElementById（'mapzoom'）的innerHTML =缩放：+个zoomLevel;
}）;
}
功能showAddress（）{
警报（奥钢联navegar段结尾endereço！）;
VAR地址=的document.getElementById（'txtAddress'）值。
地理coder.geo code（{'地址'：地址}，功能（结果状态）{
如果（状态== google.maps.Geo coderStatus.OK）{
map.setCenter（结果[0] .geometry.location）;
VAR的标记=新google.maps.Marker（{
图：熔点，
位置：结果[0] .geometry.location
}）;
}其他{
警报（'错误：'+状态）;
}
}）; }
功能addMarker（位置）{
VAR的标记=新google.maps.Marker（{
拖动：真实，
动画：google.maps.Animation.DROP，
位置：位置，
标题：邦巴，
地图：地图，
图示：炸弹
}）;
markersArray.push（标记）;
}
功能setAllMap（图）{
对于（VAR I = 0; I＆LT; markersArray.length;我++）{
markersArray [I] .setMap（图）
}
}
功能clearMarkers（）{
setAllMap（NULL）;
} 功能showMarkers（）{
setAllMap（地图）;
}
功能deleteMarkers（）{
clearMarkers（）;
markersArray = [];
}
功能loadScript（）{
VAR脚本=使用document.createElement（'脚本'）;
script.type =文/ JavaScript的';
script.src ='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
'回调=初始化';
document.body.appendChild（脚本）;
} 在window.onload = loadScript;
如果（！navigator.geolocation）{
警报（'您的浏览器不支持地理定位'）;
}
＆LT; / SCRIPT＆GT;
解决方案
试试这个.....
＆LT;脚本＆GT;
变种markersArray = [];
VAR _MAP = NULL;
VAR _c = NULL;
@foreach（以型号VAR项）
{
＆LT;文字和GT;
markersArray.push（新google.maps.Marker（{
拖动：真实，
动画：google.maps.Animation.DROP，
位置：新google.maps.LatLng（'@ item.latitude'，'@ item.longitude，假），
标题：不管标题'，
图：_MAP
}））;
＆LT; /文字和GT;
}
＆LT; / SCRIPT＆GT;
第二个问题
我不得不仔细看一下您的code，并发现你已经提到这三个问题......他们中的一个。其他的人是你重复的变量名，你是不是实例化一个新的对象。现在改变了....
@foreach（以型号VAR项）
{
＆LT;文字和GT;
VAR位置= google.maps.LatLng（'@ item.latitude'，'@ item.longitude'，FALSE）;
addMarker（处）;
＆LT; /文字和GT;
}
这个....
@foreach（以型号VAR项）
{
＆LT;文字和GT;
addMarker（新google.maps.LatLng（parseFloat（'@ item.latitude'），parseFloat（'@ item.longitude'）））;
＆LT; /文字和GT;
}
让我知道如何去
I have a Class like this:
public class Markers
{
public double latitude { get; set; }
public double longitude { get; set; }
//Constructors and Methods
//(...)
}
On my Controller I have an ActionResult with a List of Markers and I add latitude and longitude like this
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
//(...)
And at the end i return my list to the View:
return (listM);
Now on the View, I need to access the data and fill an array so I can display the markers on my google map.
How to fill the array with markers in position lat, long from my list?
@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>
NOTE: This is how I add a marker on that array with a click on the map.
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);
}
Question 2:Markers still doesn't show on map after @Leo Solution!
<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>
解决方案
Try this.....
<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>
Second Question
I had to carefully look at your code and found 3 problems...one of them you've already mentioned it. The other ones are that you are duplicating variable names and you are not instantiating a new object. Now change this....
@foreach(var item in Model)
{
<text>
var locations = google.maps.LatLng('@item.latitude', '@item.longitude', false);
addMarker(locations);
</text>
}
to this....
@foreach(var item in Model)
{
<text>
addMarker(new google.maps.LatLng(parseFloat('@item.latitude'), parseFloat('@item.longitude')));
</text>
}
Let me know how it goes
这篇关于C＃的ASP.NET MVC项目和谷歌地图：如何填写JavaScript数组与C＃列表与LT值;＆GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！