[英]How to toggle on/off a geojson layer on a google maps html page
我对在Google Map API V3上显示和隐藏一些geojson图层感到困惑,我想通过复选框设置图层状态,我不知道该怎么做,
现在,我可以通过以下代码在1层以上进行设置:
var geojesonlayer1 = new google.maps.Data();
var geojesonlayer2 = new google.maps.Data();
geojesonlayer1.loadGeoJson('mygeojson path');
geojesonlayer2.loadGeoJson('mygeojson path');
//layer style
geojesonlayer1.setStyle({
strokeColor: 'yellow',
strokeWeight: 5
});
geojesonlayer2.setStyle({
strokeColor: 'blue',
strokeWeight: 1
});
//add layer to map
geojesonlayer1.setMap(map);
geojesonlayer2.setMap(map);
//remove layer from map
geojesonlayer1.setMap(null);
geojesonlayer2.setMap(null);
我为您准备了一个小提琴,以演示如何使用复选框。 参见https://jsfiddle.net/84e2xqrp/
var map;
var geojesonlayer1;
var geojesonlayer2;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lng: -80.386962890625,
lat: 43.40903821777055
},
zoom: 8
});
geojesonlayer1 = new google.maps.Data();
geojesonlayer2 = new google.maps.Data();
geojesonlayer1.loadGeoJson('https://www.mocky.io/v2/5daa5ee73100002d00becd13');
geojesonlayer2.loadGeoJson('https://www.mocky.io/v2/5daa5f293100007e00becd14');
//layer style
geojesonlayer1.setStyle({
strokeColor: 'yellow',
strokeWeight: 5
});
geojesonlayer2.setStyle({
strokeColor: 'blue',
strokeWeight: 1
});
geojesonlayer1.setMap(map);
geojesonlayer2.setMap(map);
}
$("#layer1_checkbox").change(function() {
if (this.checked) {
geojesonlayer1.setMap(map);
} else {
geojesonlayer1.setMap(null);
}
});
$("#layer2_checkbox").change(function() {
if (this.checked) {
geojesonlayer2.setMap(map);
} else {
geojesonlayer2.setMap(null);
}
});
initialize();
<div id="map"></div>
<hr />
Layer 1 <input id="layer1_checkbox" type="checkbox" checked />
Layer 2 <input id="layer2_checkbox" type="checkbox" checked />
您具有代码逻辑的基础知识,但是您需要将事件侦听器连接到复选框。 在示例中,我们将onChange侦听器(通过jquery)连接到复选框,并使用其选中状态来确定是否应将GeoJSON图层附加到地图实例或从地图实例分离(实际上分别显示或隐藏了它)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.