-1
Je souhaite afficher plusieurs polygones sur la carte google et afficher la visibilité de chaque polygone. J'ai écrit le code pour afficher plusieurs polygones et la fonction de bascule, mais les cartes sont affichées mais la fonction bascule ne fonctionne pas. Où est-ce que je fais l'erreur?Comment activer la visibilité de chaque polygone à l'aide de la case à cocher dans Google Maps?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Toggle Visibility</title>
<style>
html, body, #map-canvas {
height: 650px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var map;
function toggleLayer(toggleLayer,id)
{
if ($('#'+id).is(':checked')) {
toggleLayer.setMap(map);
}
else
{
toggleLayer.setMap(null);
}
}
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(41.8500,-87.9645),
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var path1 = [
[41.769007157585534,-88.20167541503906],
[41.76081263047197,-88.12236785888672],
[41.717517926019624,-88.19429397583008]
];
var path2 = [
[41.88336502279732,-88.09249877929688],
[41.88157575821145,-88.12957763671875],
[41.84271080015277,-88.12408447265625],
[41.841431946284025,-88.08425903320312]];
var path3 = [
[41.96051129429776,-88.12957763671875],
[41.93906275484857, -88.00048828125],
[41.884387437207835, -88.02314758300781],
[41.879275201550634, -88.07395935058594],
[41.948766559468574, -88.11172485351562]];
var path4 = [
[41.80203073088394, -88.09730529785156],
[41.801006999656636, -88.07533264160156],
[41.74313962010849, -88.05301666259766]];
var path5 = [
[41.901254912872794, -87.94418334960938],
[41.949277245116555, -87.92015075683594],
[41.93446570034958, -87.87895202636719],
[41.96459591213679, -87.82608032226562],
[41.9753167881278, -87.78968811035156],
[41.899721690058364, -87.83706665039062],
[41.937019660425264, -87.72239685058594],
[41.87569639323101, -87.63175964355469]];
var path6 = [
[41.780016905285535, -87.95448303222656],
[41.83171182161546, -87.96066284179688],
[41.83273506215261, -87.94281005859375],
[41.81073178596061, -87.88925170898438],
[41.81226714359981, -87.78282165527344],
[41.87723019276536, -87.77114868164062],
[41.782577040867636, -87.74848937988281],
[41.77182378456081, -87.88581848144531],
[41.801006999656636, -87.9290771484375]];
var path7 = [
[41.852173524388824, -87.62489318847656],
[41.70880422215806, -87.62283325195312],
[41.70829161455626, -88.0059814453125],
[41.74416427530836, -87.96821594238281],
[41.73545418490723, -87.91603088378906],
[41.735966575868716, -87.68051147460938],
[41.840920397579936, -87.67707824707031]];
function newPolyLine(path) {
var polyLine = new google.maps.Polyline(new google.maps.Polygon({
path:path.map(
function(source, index, array) {
return new google.maps.LatLng(source[0], source[1]);
}),
// strokeColor:"FF0000",
// strokeOpacity:0,
// strokeWeight:3,
// //fillColor:"#94C11F",
// fillOpacity:0.5,
// clickable:false
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
// fillOpacity: 0.1,
fillColor: '#ff987b',
fillOpacity: 0.35,
// name: 'Polygon 2',
map:map
}));
polyLine.setMap(map);
return polyLine;
};
var multipoly1 = newPolyLine(path1);
var multipoly2 = newPolyLine(path2);
var multipoly3 = newPolyLine(path3);
var multipoly4 = newPolyLine(path4);
var multipoly5 = newPolyLine(path5);
var multipoly6 = newPolyLine(path6);
var multipoly7 = newPolyLine(path7);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<input id="togglepoly1" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 1
<input id="togglepoly2" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 2
<input id="togglepoly3" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 3
<input id="togglepoly4" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 4
<input id="togglepoly5" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 5
<input id="togglepoly6" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 6
<input id="togglepoly7" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 7
</body>
</html>
Toute aide sera grandement appréciée. Merci d'avance. Je l'ai eu à travailler, avec quelques modifications.
Aucun de vos violons ne fonctionne (je ne vois pas de cartes non plus), ils ont tous deux des erreurs javascript. – geocodezip
@geocodezip: Veuillez vérifier maintenant. Ça marche. Si vous pouvez m'aider avec mes questions ce serait génial. Merci d'avance. – BKhanderia