问题描述
我有一个这样的类:
公共类标记
{
公共双纬度{搞定;组; }
公共双经度{搞定;组; } //构造函数和方法
//(...)
}
在我的控制器我有标记列表一个ActionResult,我添加经纬度这样
列表<标志物GT; listM =新的List<标志物GT;(); //注意:这是我的ActionResult,与没有问题之外。
//(...)
listM.Add(新标记(值[0],价值[1])); //注意:值[0]是我的纬度和值[1]是我的经度
//(...)
和结束时我就按照列表返回查看:
收益率(listM);
现在的查看,我需要访问的数据,并填充数组,所以我可以显示我的谷歌地图上的标记。
如何与位置标记填充数组纬度,经度从我的名单?
@using ProjectName.Models
@model名单<标志物GT;< HTML和GT;
< HEAD> ...< /头>
<身体GT; ...< /身体GT;
<脚本类型=文/ JavaScript的>//我如何添加一个GoogleMap的标记?
变种markersArray = [];
@foreach(以型号VAR项)
{
//不能使用此google.maps.Marker =的foreach里面(
}< / SCRIPT>
< / HTML>
注意:这是我如何添加标记的阵列上与地图上点击
函数addMarker(位置){
VAR的标记=新google.maps.Marker({
拖动:真实,
动画:google.maps.Animation.DROP,
位置:位置,
标题:'炸弹',
地图:地图,
图示:炸弹
});
markersArray.push(标记);
}
问题2:
标记仍然不显示在@Leo解决方案后的地图!
<脚本类型=文/ JavaScript的>
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项)
{
<文字和GT;
VAR位置= google.maps.LatLng('@ item.latitude','@ item.longitude',FALSE);
addMarker(处);
< /文字和GT;
} 地理codeR =新google.maps.Geo codeR(); 对于(VAR I = 0; I< 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< 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){
警报('您的浏览器不支持地理定位');
}
< / SCRIPT>
试试这个.....
<脚本>
变种markersArray = [];
VAR _MAP = NULL;
VAR _c = NULL;
@foreach(以型号VAR项)
{
<文字和GT;
markersArray.push(新google.maps.Marker({
拖动:真实,
动画:google.maps.Animation.DROP,
位置:新google.maps.LatLng('@ item.latitude','@ item.longitude,假),
标题:不管标题',
图:_MAP
}));
< /文字和GT;
}
< / SCRIPT>
第二个问题
我不得不仔细看一下您的code,并发现你已经提到这三个问题......他们中的一个。其他的人是你重复的变量名,你是不是实例化一个新的对象。现在改变了....
@foreach(以型号VAR项)
{
<文字和GT;
VAR位置= google.maps.LatLng('@ item.latitude','@ item.longitude',FALSE);
addMarker(处);
< /文字和GT;
}
这个....
@foreach(以型号VAR项)
{
<文字和GT;
addMarker(新google.maps.LatLng(parseFloat('@ item.latitude'),parseFloat('@ item.longitude')));
< /文字和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;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!