覆盖数组中的标记

Question

我试图用信息窗口显示所有标记，再单击一次隐藏它们，但我只能访问最后一个入口，而且我不知道如何在循环期间停止覆盖。我试图在循环后创建一个全局数组 markersArray 和 markersArray.push(marker)，但没有成功。我认为这是一个愚蠢的错误，但我正在查看代码，但不知道它在哪里。

JSFiddle

Answer 1

您需要跟踪一组放置的标记，然后重置它，然后将标记值设置为未定义，以便正确切换点击。我用工作示例分叉了 fiddle。 http://jsfiddle.net/xo5pw6q3/

var marker;
var infowindow = new google.maps.InfoWindow({});

function buttonCarros(buttonCarrosDiv, map_canvas) {

    // Control border
    var buttonCarrosUI = document.createElement('div');
    buttonCarrosUI.style.backgroundColor = '#fff';
    buttonCarrosUI.style.border = '1px solid #717B87';
    buttonCarrosUI.style.borderRadius = '3px';
    buttonCarrosUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
    buttonCarrosUI.style.cursor = 'pointer';
    buttonCarrosUI.style.marginBottom = '5px';
    buttonCarrosUI.style.textAlign = 'center';
    buttonCarrosUI.title = 'Clique para ver os carros';
    buttonCarrosDiv.appendChild(buttonCarrosUI);


    // Control interior
    var buttonCarrosText = document.createElement('div');
    buttonCarrosUI.style.color = 'rgb(25,25,25)';
    buttonCarrosUI.style.fontFamily = 'Roboto,Arial,sans-serif';
    buttonCarrosUI.style.fontSize = '13px';
    buttonCarrosUI.style.lineHeight = '38px';
    buttonCarrosUI.style.paddingLeft = '5px';
    buttonCarrosUI.style.paddingRight = '5px';
    buttonCarrosUI.innerHTML = 'Carros';
    buttonCarrosUI.appendChild(buttonCarrosText);



    google.maps.event.addDomListener(buttonCarrosUI, 'click', function () {
        var data = JSON;
        var myLatLng;
        if (marker && marker.setMap) {
            $.each(mapMarkers, function (i, markerInfo) {
                var marker = mapMarkers[i];
                if (marker.getMap() != null) marker.setMap(null);
                else marker.setMap(map_canvas);
            });
            mapMarkers = [];
           marker = undefined;
        } else {
            $.each(data.markers, function (i, markerInfo) {
                myLatLng = new google.maps.LatLng(markerInfo.latitude, markerInfo.longitude);
                marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map_canvas,
                    title: markerInfo.title
                });
                mapMarkers.push(marker);
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(marker.getTitle());
                    infowindow.open(map_canvas, marker);
                });
            });

        }
    });
}
var mapMarkers = [];
var JSON = {
    "markers": [{
        "longitude": "-46.763117",
            "latitude": "-23.540187",
            "title": "title1"
    },
                {
        "longitude": "41.763117",
            "latitude": "28.540187",
            "title": "title2"
    }
               ]
};

var map_canvas;
var line;
var santaCatarina = new google.maps.LatLng(-27.666885236556496, -51.15083105000002);

function initialize(url) {
    var myOptions = {
        zoom: 3,
        center: santaCatarina,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var buttonCarrosDiv = document.createElement('div');
    var carros = new buttonCarros(buttonCarrosDiv, map_canvas);

    buttonCarrosDiv.index = 1;
    map_canvas.controls[google.maps.ControlPosition.TOP_RIGHT].push(buttonCarrosDiv);


}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 2

添加全局 markersArray 以保留对标记的引用
使用 createMarker 函数在点击侦听器的标记上保持函数闭包：

function createMarker(markerInfo) {
    myLatLng = new google.maps.LatLng(markerInfo.latitude, markerInfo.longitude);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map_canvas,
        title: markerInfo.title
    });
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(marker.getTitle());
        infowindow.open(map_canvas, marker);
    });
    markersArray.push(marker);
}

这样称呼它：

google.maps.event.addDomListener(buttonCarrosUI, 'click', function () {
    var data = JSON;
    var myLatLng;
    if (markersArray && markersArray[0] && markersArray[0].setMap) {
        for (var i = 0; i < markersArray.length; i++) {
            if (markersArray[i].getMap() != null) {
                markersArray[i].setMap(null);
            } else {
                markersArray[i].setMap(map_canvas);
            }
        }
    } else {
        $.each(data.markers, function (i, markerInfo) {
            createMarker(markerInfo);
        });

    }
});

working fiddle

（根据您的更新）

覆盖数组中的标记

Ovewriting markers in array

javascript

jquery

google-maps

google-maps-api-3