我是应用程序中的一个功能,它在按钮点击时向地图添加标记,此标记还允许用户以可编辑元素的形式输入信息,以及能够根据请求删除标记。
var markers = [];
counter = 0;
function addMarker(position) {
counter++;
var bridgeIcon = new google.maps.MarkerImage("img/map_markers/warning_map_marker.png", null, null, null);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
map: map,
title: "Hello!!",
draggable: true,
animation: google.maps.Animation.DROP,
icon: bridgeIcon,
id: counter
});
markers.push(marker);
//Content structure of info Window for the Markers
var contentString = '<div class="marker-info-win">' +
'<h3>Marker Information</h3>' +
'<div class="warning-title" contenteditable="true" data-text="Warning Title"/></div>'+
'<i class="fa fa-pencil"></i>' +
'<div class="warning-additional-info" contenteditable="true" data-text="Warning Additional Information"></div>'+
'<i class="fa fa-pencil"></i>' +
'<br/><button id="deleteButton" name="remove-marker" class="remove-marker" title="Remove Marker" data-id="'+ counter +'">Remove Marker</button></div>';
//Create an infoWindow
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//add click event listener to marker which will open infoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this); // click on marker opens info window
});
google.maps.event.addListener(infowindow, 'domready', function () {
var button = document.getElementById('deleteButton');
var id = parseInt(button.getAttribute('data-id'));
button.onclick = function() {
deleteMarker(id);
};
});
}
function deleteMarker(markerId) {
for (var i=0; i<markers.length; i++) {
if (markers[i].id === markerId) {
markers[i].setMap(null);
}
}
}
上面的代码创建了标记并将其推送到数组,我遇到的问题是从数组中检索标记以在另一个页面上的地图上使用,我试图遍历数组以获取标记LatLng但它没有输出到页面,我也没有收到任何错误?
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][0], markers[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
上面的代码是在页面加载时发生的循环操作,应该根据它们的位置加载数组中的所有标记。
console.log(markers)返回以下内容
[Lh]0: Lh
__e3_: Object
__gm: Object
anchorPoint: T
animating: false
animation: null
changed: function (a){a in e&&(delete this[Wc],d.j[Ze(this)]=this,Y0(d))}
clickable: true
closure_uid_180767458: 412
draggable: true
gm_accessors_: Object
gm_bindings_: Object
icon: Objectid: 1
internalPosition: lf
map: Zk
position: lf
title: "Hello!!"
visible: true
__proto__: c
length: 1
__proto__: Array[0]
答案 0 :(得分:3)
使用纯数据创建另一个数组,并提供您需要的所有信息。所以你会得到类似的东西:
var markersData = []
在循环内创建标记时,添加索引:
var marker = new google.maps.Marker({
position: latlng,
map: googleMap,
title: 'Hello World!',
labelContent: "A",
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels",
labelInBackground: false,
index: i
});
markersData.push(marker);
然后在您的处理程序中,您可以通过
访问数据google.maps.event.addListener(marker, 'click', function () {
var info = markersData[this.index];
...
});