Comment est-ce que je peux détecter de quelle figure (cercle, polygone) vient certains événements quand ceci est superposé? google maps api javascript

J'ai des problèmes avec les figures de géométrie dans google maps (cercles et polygones), exemple: quand j'ai deux cercles superposés et que j'utilise l'événement mouse over ou mouseout, google maps imprime seulement les informations du cercle plus gros, car le gros chiffre est mis après le petit. J'ai les mêmes problèmes si j'ai 7 cercles ou polygones presque dans la même position.Comment est-ce que je peux détecter de quelle figure (cercle, polygone) vient certains événements quand ceci est superposé? google maps api javascript

Ceci est un exemple avec deux cercles, mais le problème réside dans la combinaison des figures.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Circles</title> 
 
    <style> 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 80%; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <script> 
 

 
// This example creates circles on the map, representing populations in North 
 
// America. 
 

 
// First, create an object containing LatLng and population for each city. 
 
var citymap = { 
 
    chicago: { 
 
    center: {lat: 41.878, lng: -87.629}, 
 
    population: 845837 
 
    }, 
 
    chicago1: { 
 
    center: {lat: 41.878, lng: -87.629}, 
 
    population: 2714856 
 
    }, 
 
    losangeles: { 
 
    center: {lat: 34.052, lng: -118.243}, 
 
    population: 3857799 
 
    }, 
 
    vancouver: { 
 
    center: {lat: 49.25, lng: -123.1}, 
 
    population: 603502 
 
    } 
 
}; 
 

 
function initMap() { 
 
    // Create the map. 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: {lat: 37.090, lng: -95.712}, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }); 
 

 
    // Construct the circle for each value in citymap. 
 
    // Note: We scale the area of the circle based on the population. 
 
    var cont=0; 
 
    for (var city in citymap) { 
 
    // Add the circle for this city to the map. 
 
    var cityCircle = new google.maps.Circle({ 
 
     text:'hola'+cont, 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     title:'hola'+cont, 
 
     strokeWeight: 2, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.35, 
 
     optimized: false, 
 
     zIndex:10, 
 
     map: map, 
 
     center: citymap[city].center, 
 
     radius: Math.sqrt(citymap[city].population) * 100 
 
    }); 
 
    cont++; 
 
    
 
    google.maps.event.addListener(cityCircle, 'mouseover', function(event) { 
 
    \t var lat = this.getCenter().lat(); 
 
\t \t \t \t \t var lon = this.getCenter().lng(); 
 
\t \t \t \t \t var lat2 = event.latLng.lat(); 
 
\t \t \t \t \t var lon2 = event.latLng.lng(); 
 
\t \t \t \t \t console.log(lat+lon+"Circulo"+this.text); 
 
\t \t \t \t \t console.log(lat2+lon2+"mouse"); 
 
\t \t \t \t \t console.log(this.zIndex+"index"+this.text); 
 
\t }); 
 
\t \t \t \t 
 
\t \t \t \t google.maps.event.addListener(cityCircle,'mouseout',function(event){ 
 
\t \t \t \t \t var lat = this.getCenter().lat(); 
 
\t \t \t \t \t var lon = this.getCenter().lng(); 
 
\t \t \t \t \t var lat2 = event.latLng.lat(); 
 
\t \t \t \t \t var lon2 = event.latLng.lng(); 
 
\t \t \t \t \t console.log(lat+lon+"Circulo"+this.text); 
 
\t \t \t \t \t console.log(lat2+lon2+"mouse"); 
 
\t \t \t \t \t console.log(this.zIndex+"index"+this.text); 
 
\t \t \t \t }); 
 
    } 
 

 
} 
 

 
    </script> 
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwm19SMHtEZaXzloVeyMeMULkciJuatEo&signed_in=true&callback=initMap"></script> 
 
    </script> 
 
    </body> 
 
</html>

Source

2016-11-24 Angel Espinoza

Vous ne pouvez pas utiliser mouseover/mouseout pour cela. Vous devez traiter tous vos objets et déterminer si le mouseevent est ou non à l'intérieur de l'objet (pour un cercle la distance du centre est inférieure au rayon, pour un polygone la méthode containsLocation).

Exemple map auditeur mousemove:

google.maps.event.addListener(map, 'mousemove', function(event) { 
    var lat = event.latLng.lat(); 
    var lon = event.latLng.lng(); 
    for (var i = 0; i < areaArray.length; i++) { 
    if (areaArray[i].getRadius) { 
     // circle 
     if (google.maps.geometry.spherical.computeDistanceBetween(areaArray[i].getCenter(), event.latLng) < areaArray[i].getRadius()) { 
     console.log("in circle:"+event.latLng.toUrlValue(6) + "Circulo center="+areaArray[i].getCenter().toUrlValue(6)+" radius="+areaArray[i].getRadius()+" meters, " + areaArray[i].text); 
     // console.log(lat2 + lon2 + "mouse"); 
     // console.log(this.zIndex + "index" + this.text); 
     } 
    } 
    } 
});

proof of concept fiddle (for the circles in your example)

Source

2016-11-24 01:09:52 geocodezip

Salut géocodage, merci beaucoup, cela peut me aider à mes devoirs. –

Comment est-ce que je peux détecter de quelle figure (cercle, polygone) vient certains événements quand ceci est superposé? google maps api javascript

Répondre

Questions connexes