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

Posted 2021-04-02

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

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]

答案

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

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