【发布时间】：2023-03-14 16:12:02
【问题描述】：
我正在尝试删除使用 InfoBox.js 脚本创建的标记标签。标记存储为我在下面的代码中托管的外部 geojson 点文件。每个标记都有一个基于 json 属性的标签。
标签在加载时显示良好，我有一个 geojson 文件，当 zoom_changed > 9 监听器被触发时加载。发生这种情况时，“主”geojson 会关闭（可见：false），“子点”会打开。问题是“主”geojson 的标签不会关闭，反之亦然“子点”。
到目前为止，以下 stackexchange 帖子没有帮助： "Google Map API - Removing Markers" 和 "Google forEach map.data feature - return feature LatLng"。我尝试过的其他许多小事情都没有奏效，这些事情太多了，无法一一列举。为了让事情变得更简单，这是我创建的一个 jsfiddle：https://jsfiddle.net/tlavery/9jzh41jr/2/。它现在无法正常运行，但我相信这对于某些专业人士来说是一个快速修复。
我也用 markerwithlabels.js 库尝试过同样的事情。发生了同样的问题，markerwithlabel 比 InfoBox.js 选项慢很多。
这是我的简化代码，不包括其他可以正常工作的原始代码：
<!DOCTYPE html>
<html>
<head>
<title>Label points</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.labels {
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;
white-space: nowrap;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="infobox.js" type="text/javascript"></script>
<script>
var map;
var mapOptions = {
center: { lat: 49.5, lng: -126.5 },
zoom: 8,
maxZoom: 15,
minZoom: 7,
scaleControl: true
};
var labelArray = [];
//initMap initiates all the styles and listeners
function initMap() {
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var harvestPoints = new google.maps.Data();
harvestPoints.loadGeoJson('https://api.myjson.com/bins/1d9u6');
var harvestSubPoints = new google.maps.Data();
harvestSubPoints.loadGeoJson('https://api.myjson.com/bins/3g2qm');
var areaIcon = function (feature) {
labelID = "lb" + feature.getProperty('MGNT_AREA').toString();
var LatLong = feature.getGeometry().get();
var labelID = new InfoBox({
content: feature.getProperty('MGNT_AREA'),
boxStyle: {
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -24),
position: LatLong,
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
});
labelID.open(map);
labelArray.push(labelID);//this does not work for some reason
//there is a custom icon I use for the real page. I won't bother with it here.
//return ({ icon: 'labels/num_icon.png' });
};
var vFalse = {
visible: false
};
var styleFeatures = function (hp, hsp) {
harvestPoints.setStyle(hp);
harvestSubPoints.setStyle(hsp);
};
styleFeatures(areaIcon, vFalse);
//global InfoWindow variables to display the detailed status text for the subAreaPoints
var infowindow = new google.maps.InfoWindow({maxWidth: 300});
harvestSubPoints.addListener('click', function (event) {
infowindow.setPosition(event.latLng);
//the label and the status details are displayed seperated by a ": "
infowindow.setContent(event.feature.getProperty('LABEL') +": "+ event.feature.getProperty('Details'));
infowindow.open(map);
});
map.addListener('zoom_changed', function (event) {
currentZoom = map.getZoom();
console.log("currentZoom = " + currentZoom)
if (currentZoom > 9) {
styleFeatures(vFalse, areaIcon);
} else if (currentZoom <= 9) {
styleFeatures(areaIcon, vFalse);
infowindow.close(map);
}
});
harvestSubPoints.setMap(map);
harvestPoints.setMap(map);
};//close the initMap function
console.log("initMap() finished");
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<!--the map css settings from above set the map to take up 100% of the browser window-->
<div id="map"></div>
</body>
</html>
【问题讨论】：
标签： javascript json google-maps geojson infobox