0
Je dois supprimer un polygone que je viens de créer lors d'un événement click. Lorsque je clique à nouveau sur un autre, il devrait supprimer le polygone existant et en ajouter un nouveau. Au lieu de cliquer la deuxième fois, il ajoute le second polygone mais ne supprime pas le premier. J'utilise des polygones en combinaison avec des tables de Fusion. Les tables de fusion enlèvent sur aclick comme elles devraient, c'est juste les polygones qui refusent.Supprimer un polygone et en ajouter un nouveau avec Google Maps
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
poly = "";
// Basic options for a simple Google Map
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 4,
scrollwheel: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(-15.614057, 23.351191),
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var mapDiv = document.getElementById('map');
// Add Fusion Tables Layer
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1rOaSNuoP1LwPf7-5j5Hr4tSWxjKT265MmuS8vd_l'
},
options : {suppressInfoWindows:true, clickable:false}
});
layer.setMap(map);
// Add Dynamic Markers which loads when Map loads
function setupMarkers(){
var locations = [
<?php $custom_query = new WP_Query(array('post_type' => 'lodge', 'posts_per_page' => 20));
$counter = 0;
while($custom_query->have_posts()) : $custom_query->the_post(); $counter++; $image = get_field('page_image');?>
['<div class="info-popup"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><p class="lodge-rating"><?php $stars="<i class=\'fa fa-star\'></i>";$x = get_field('rating');echo str_repeat($stars, $x);?></p><a href="<?php the_permalink(); ?>"><img src="<?php echo $image['url']; ?>"/></a><p><?php the_field('intro') ?></p><a href="<?php the_permalink(); ?>">View Lodge</a></div>', <?php the_field('latitude'); ?>, <?php the_field('longitude'); ?>, <?php echo $counter; ?>],
<?php endwhile; ?>
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
setupMarkers()
// Setup the Countries using the Fusion Table Data
function setCountries(blurb, countryLat, countryLong, zoomLev) {
layer.setMap(map);
var options = {
styles: []
};
var styles = [];
Kenya = blurb;
var latLng = new google.maps.LatLng(countryLat, countryLong);
map.setZoom(parseFloat(zoomLev));
map.panTo(latLng);
options.styles.push({
where: "'name' = '" + Kenya + "'",
polygonOptions: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.3
}
});
layer.setOptions(options);
};
// Setup the Destinations with user provided coordinates.
function setDestinations(countryLat, countryLong, zoomLev, shapesLatArr, shapesLongArr) {
layer.setMap(null);
pOptions = "";
jQuery.each(shapesLatArr, function(i, item) {
if (i < shapesLatArr.length - 1){
myCoordinates.push(new google.maps.LatLng(parseFloat(shapesLatArr[i]) , parseFloat(shapesLongArr[i])));
}
});
var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.3
};
var latLng = new google.maps.LatLng(countryLat, countryLong);
map.setZoom(parseFloat(zoomLev));
map.panTo(latLng);
var pOptions = polyOptions;
poly = new google.maps.Polygon(pOptions);
clearPoly();
poly.setMap(map);
myCoordinates = [];
};
// Clear Polygons
function clearPoly() {
poly.setMap(null);
}
// Setup the Click Events For Countries
allCuntries = jQuery(".heatmap");
allCuntries.each(function() {
jQuery(this).click(function() {
blurb = jQuery(this).text();
countryLat = jQuery(this).attr('data-lat');
countryLong = jQuery(this).attr('data-long');
zoomLev = jQuery(this).attr('data-zoom');
setCountries(blurb, countryLat, countryLong, zoomLev);
});
});
// Setup the Click Events For Destinations
allDestins= jQuery(".heatrat span");
allDestins.each(function() {
jQuery(this).click(function() {
myCoordinates = [];
shapesLat =[];
shapesLong =[];
countryLat = jQuery(this).attr('data-lat');
countryLong = jQuery(this).attr('data-long');
zoomLev = jQuery(this).attr('data-zoom');
shapesLat = jQuery(this).attr('data-shape-lat');
shapesLong = jQuery(this).attr('data-shape-long');
shapesLatArr = shapesLat.split(',').map(Number);
shapesLongArr = shapesLong.split(',').map(Number);
setDestinations(countryLat, countryLong,zoomLev, shapesLatArr, shapesLongArr);
});
});
}
</script>
Pour clarifier ma réponse est effectivement résoudre le problème, il serait utile si vous pouviez configurer un https://jsbin.com/?html,js,output pour servir de code, nous pouvons tous les deux jouer avec pour déterminer le problème –
Salut David merci pour la réponse, j'ai fait comme ci-dessous mais toujours pas de chance. Vérifiez le lien de développement, www.weloveweb.co.za/africaandyou. Je ne peux pas configurer une corbeille car les données sont chargées dynamiquement à partir d'une base de données. Vous pouvez le tester en faisant défiler jusqu'à la carte, en cliquant sur Afrique du Sud, puis sur KwaZulu Natal, puis sur Cape Town, faites un zoom arrière et vous verrez les deux polygones. –
Voir mon édition - il semble que vous avez un problème avec l'ajout de trop de clics auditeurs. Combien d'emplacements sont inclus? –