javascript - 从嵌套的谷歌地图标记数组获取标记位置

Question

我是应用程序中的一个功能，可在单击按钮时向 map 添加标记，该标记还允许用户以可编辑元素的形式输入信息，并能够根据请求删除标记。

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);
        }
    }
}

上面的代码创建标记并将其推送到数组，我遇到的问题是从数组中检索标记以在另一页的 map 上使用，我尝试循环遍历数组以获取标记 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]

Answer 1

用纯数据创建另一个数组并放入您需要的所有信息。所以你会得到类似的东西:

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];
    ...
});