Javascript 使用1个按钮切换显示/隐藏Google标记
我正在尝试切换一个按钮,该按钮将隐藏/显示放置在地图中的谷歌标记。我一直在寻找SOF的答案,但都提供了数组方法。我想知道是否可以不使用数组来完成它Javascript 使用1个按钮切换显示/隐藏Google标记,javascript,google-maps-api-3,google-maps-markers,Javascript,Google Maps Api 3,Google Maps Markers,我正在尝试切换一个按钮,该按钮将隐藏/显示放置在地图中的谷歌标记。我一直在寻找SOF的答案,但都提供了数组方法。我想知道是否可以不使用数组来完成它 function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: {lat: 1.3420894594991328, lng: 103.83490918886719},
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 1.3420894594991328, lng: 103.83490918886719},
});
var ntuc = {
lat: 1.32805676,
lng: 103.9216584
};
var ntucmap = new google.maps.Marker({
position: ntuc,
map: map,
icon: 'https://maps.google.com/mapfiles/kml/paddle/blu-stars.png'
});
}
function toggleNTUCmap() {
if (!ntucmap.getVisible()) {
ntucmap.setVisible(true);
} else {
ntucmap.setVisible(false);
}
}
钮扣
<button class="button-oj pure-button" onclick="toggleNTUCmap()">
<i class="fas fa-hospital"></i> NTUC</button>
你不能这样做吗
function clearMap(map) {
for(var i = 0; i<ntucmap.length; i++){
ntucmap[i].setMap(null);
}
}
函数clearMap(映射){
for(var i=0;i//在地图的中心添加一个标记。
var ntuc={lat:1.32805676,lng:103.9216584};
addMarker(ntuc);
setMapOnAll(空);
//将标记添加到地图并推送到阵列。
功能添加标记(位置){
var marker=new google.maps.marker({
位置:位置,,
地图:地图,
图标:'https://maps.google.com/mapfiles/kml/paddle/blu-stars.png'
});
标记器。推(标记器);
}
//在阵列中的所有标记上设置贴图。
函数setMapOnAll(映射){
对于(var i=0;i
最后,我使用数组来保存所有的标记。根据用户用来切换的按钮,它将确定是否有标记将在地图上显示或不显示。我认为这可能是因为它没有重新命名。您是否尝试过向它传递替代属性或将其设置为状态?您好@mrdeadsven,如何为按钮执行计数器?@Eddie只需创建一个变量“int counter=0”。然后在onclick函数中,您首先要做的是counter++。然后是一个简单的ifelse。类似于if(计数器%2==0){clearMap(map)}else{setmaponal(map)}。@Eddie没问题,很高兴我能帮上忙!
function clearMap(map) {
for(var i = 0; i<ntucmap.length; i++){
ntucmap[i].setMap(null);
}
}
function setMapOnAll(map) {
for (var i = 0; i < ntucmap.length; i++) {
ntucmap[i].setMap(map);
}
}
// Adds a marker at the center of the map.
var ntuc = {lat: 1.32805676, lng: 103.9216584};
addMarker(ntuc);
setMapOnAll(null);
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
icon: 'https://maps.google.com/mapfiles/kml/paddle/blu-stars.png'
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Show/Hide Markers
var counter = 0;
function toggleMarkers() {
if (counter == 0) {
setMapOnAll(map);
counter = 1;
} else {
setMapOnAll(null);
counter = 0;
}
}