Javascript 在数组中隐藏标记-谷歌地图API V3
因此,我在隐藏标记时遇到问题,我的目标是,例如,如果我要单击名为马尼拉的控件,则将隐藏Makati和Mandaluyong中的标记。(注:马尼拉、马卡蒂、曼达卢永是菲律宾的城市 这是我的代码,我在网上搜索并使用setVisible(false),使用了.Hide()但没有任何效果,请帮助 这是我的.js文件Javascript 在数组中隐藏标记-谷歌地图API V3,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,因此,我在隐藏标记时遇到问题,我的目标是,例如,如果我要单击名为马尼拉的控件,则将隐藏Makati和Mandaluyong中的标记。(注:马尼拉、马卡蒂、曼达卢永是菲律宾的城市 这是我的代码,我在网上搜索并使用setVisible(false),使用了.Hide()但没有任何效果,请帮助 这是我的.js文件 var map; var manila = new google.maps.LatLng(14.600657, 120.98215); var makati = new google.map
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);
var映射;
var马尼拉=新的google.maps.LatLng(14.600657120.98215);
var makati=new google.maps.LatLng(14.55027121.03269);
var mandaluyong=new google.maps.LatLng(14.577449121.034011);
变量ManilaPlaces=[
[adamsonuniversity',14.586706120.985584],
[staisabel',14.585541120.983586]
];
var MandaluyongPlaces=[
[home',14.569827,121.031156],
];
var MakatiPlaces=[
[shangmakati',14.553999121.024725],
];
功能手动控制(controlDiv,map){
//为包含控件的DIV设置CSS样式
//将填充设置为5 px将偏移控件
//从地图的边缘
controlDiv.style.padding='5px';
controlDiv.style.paddingRight='5px';
//为控件边框设置CSS
var controlUI=document.createElement('div');
controlUI.style.backgroundColor='白色';
controlUI.style.borderStyle='none';
controlUI.style.cursor='pointer';
controlUI.style.textAlign='center';
controlUI.title='单击以将地图设置为马尼拉';
controlDiv.appendChild(controlUI);
//为控件内部设置CSS
var controlText=document.createElement('div');
controlText.style.fontFamily='Arial,无衬线';
controlText.style.fontSize='12px';
controlText.style.paddingLeft='4px';
controlText.style.paddingRight='4px';
controlText.innerHTML='马尼拉';
controlUI.appendChild(controlText);
//马尼拉标记
对于(变量i=0;i// 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);
}
function setMarkersVisible(Markers, visible) {
for (var i = 0; i < Markers.length; i++) {
Markers[i].setVisible(visible);
}
}
// 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);
});