Question

所以我在隐藏标记方面遇到了问题，例如，如果我点击名为Manila的控件，马卡蒂的标记，以及Mandaluyong将被隐藏。（注：马尼拉，马卡蒂，曼达卢永是菲律宾的城市。

这是我的代码，我通过互联网搜索并使用setVisible（false），使用.Hide（）但没有任何作用，请帮忙。

这是我的.js文件

var map;
var manila = new google.maps.LatLng(14.600657, 120.98215);
var makati = new google.maps.LatLng(14.55027,  121.03269);
var mandaluyong = new google.maps.LatLng(14.577449, 121.034011);

var ManilaPlaces = [ 
['adamsonuniversity',14.586706, 120.985584],
['staisabel',14.585541, 120.983586]
];

var MandaluyongPlaces = [
['home',14.569827, 121.031156],
];

var MakatiPlaces = [
['shangmakati',14.553999, 121.024725],
];

function ManilaControl(controlDiv, map) {

// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
controlDiv.style.paddingRight = '5px';

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'none';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Manila';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Manila</b>';
controlUI.appendChild(controlText);

//Manila Markers
for (var i = 0; i < ManilaPlaces.length; i++) {
        var place = ManilaPlaces[i];
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(place[1],place[2]),
            map: map,
            title: place[0],
            zIndex: place[4]
        });
    }

// Setup the click event listeners: simply set the map to
// Manila
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setZoom(14);
map.setCenter(manila);
});
}

function MakatiControl(controlDiv, map) {

// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
controlDiv.style.paddingRight = '5px';

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'none';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Makati';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Makati</b>';
controlUI.appendChild(controlText);

//Makati Markers
for (var i = 0; i < MakatiPlaces.length; i++) {
        var place = MakatiPlaces[i];
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(place[1],place[2]),
            map: map,
            title: place[0],
            zIndex: place[5]
        });
    }

// Setup the click event listeners: simply set the map to
// Makati
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setZoom(14);
map.setCenter(makati);
});
}

function MandaluyongControl(controlDiv, map) {

// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
controlDiv.style.paddingRight = '5px';

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'none';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Mandaluyong';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Mandaluyong</b>';
controlUI.appendChild(controlText);

//Mandaluyong Markers
for (var i = 0; i < MandaluyongPlaces.length; i++) {
        var place = MandaluyongPlaces[i];
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(place[1],place[2]),
            map: map,
            title: place[0],
            zIndex: place[6]
        });
    }

// Setup the click event listeners: simply set the map to
// Mandaluyong
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setZoom(14);
map.setCenter(mandaluyong);
});

}   

function initialize() {

//map initialization
var mapDiv = document.getElementById('map-canvas');
//controls map default load actions such as zoom, center, disables google maps Default UI
var mapOptions = {
zoom: 14,
center: makati,
disableDefaultUI: true
};

map = new google.maps.Map(mapDiv, mapOptions);


// Create the DIV to hold the control and
// call the ManilaControl() constructor passing
// in this DIV.
var manilaControlDiv = document.createElement('div');
var manilaControl = new ManilaControl(manilaControlDiv, map);

manilaControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(manilaControlDiv);

// Create the DIV to hold the control and
// call the MakatiControl() constructor passing
// in this DIV.
var makatiControlDiv = document.createElement('div');
var makatiControl = new MakatiControl(makatiControlDiv, map);

makatiControlDiv.index = 2;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(makatiControlDiv);

// Create the DIV to hold the control and
// call the MandaluyongControl() constructor passing
// in this DIV.
var mandaluyongControlDiv = document.createElement('div');
var mandaluyongControl = new MandaluyongControl(mandaluyongControlDiv, map);

mandaluyongControlDiv.index = 3;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(mandaluyongControlDiv);

}

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

Answer 1

我创建了一个表现出这种行为的小提琴here。

我添加了3个新数组，用于存储每个城市的google.maps.Marker对象：

// Arrays to store markers for each city
var ManilaMarkers = [];
var MandaluyongMarkers = [];
var MakatiMarkers = [];

标记在创建后会添加到这些数组中（例如：）

//Manila Markers
for (var i = 0; i < ManilaPlaces.length; i++) {
    var place = ManilaPlaces[i];
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(place[1], place[2]),
        map: map,
        title: place[0],
        zIndex: place[4]
    });

    // Add marker to array
    ManilaMarkers.push(marker);
}

我添加了一个新的setMarkersVisible函数（小提琴中的第224-228行），它遍历一系列google.maps.Marker对象，并根据值将可见性设置为true或false第二个参数：

function setMarkersVisible(Markers, visible) {
    for (var i = 0; i < Markers.length; i++) {
        Markers[i].setVisible(visible);
    }
}

当调用click事件侦听器时，将对setMarkersVisible函数执行3次调用，以根据单击的控件显示和隐藏标记。例如，如果单击马尼拉控件，则调用将隐藏Makati和Mandaluyong标记，但显示马尼拉标记：

// Setup the click event listeners: simply set the map to
// Manila
google.maps.event.addDomListener(controlUI, 'click', function () {
    map.setZoom(14);
    map.setCenter(manila);

    setMarkersVisible(ManilaMarkers, true);
    setMarkersVisible(MakatiMarkers, false);
    setMarkersVisible(MandaluyongMarkers, false);
});

在数组中隐藏标记 - GOOGLE MAPS API V3

1 个答案: