如何檢測哪個圖形（圓形，多邊形）在覆蓋它時會出現某些事件？谷歌地圖api javascript

我在谷歌地圖（圓形和多邊形）中的幾何圖形有問題，例如：當我有兩個圓圈覆蓋，我使用事件鼠標或鼠標懸停，谷歌地圖只打印圓圈的信息更多大的，因爲大的數字是放在小的後面。我有同樣的問題，如果我有7個圓或多邊形幾乎在同一個位置。如何檢測哪個圖形（圓形，多邊形）在覆蓋它時會出現某些事件？谷歌地圖api javascript

這是一個有兩個圓圈的例子，但問題在於這些數字的組合。

<!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>

來源

2016-11-24 Angel Espinoza

無法使用鼠標懸停/鼠標移開了點。您需要處理所有對象，並確定mouseevent是否位於對象內部（對於圓的距離中心的距離小於半徑，對於多邊形的containsLocation方法）。

例map鼠標移動監聽器：

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)

來源

2016-11-24 01:09:52 geocodezip

嗨地理編碼，非常感謝你，這可以幫我把我的家庭作業。 –

如何檢測哪個圖形（圓形，多邊形）在覆蓋它時會出現某些事件？谷歌地圖api javascript

回答

相關問題