오버레이 된 경우 어떤 그림 (원, 다각형)이 어떤 이벤트를 감지하는지 어떻게 알 수 있습니까? google maps api javascript

Google지도 (원과 다각형)의 기하학적 모양에 문제가 있습니다. 두 개의 원이 겹쳐져 있고 마우스를 사용하거나 마우스를 사용하면 Google지도가 서클 정보 만 더 인쇄합니다. 큰, 큰 숫자는 작은 후 넣어 때문입니다. 같은 위치에 거의 7 개의 원이나 다각형이 있으면 같은 문제가 있습니다.오버레이 된 경우 어떤 그림 (원, 다각형)이 어떤 이벤트를 감지하는지 어떻게 알 수 있습니까? google maps 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 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)

출처

2016-11-24 01:09:52 geocodezip

안녕하세요 지오는, 대단히 감사합니다,이 숙제에 저를 도울 수있다. –

오버레이 된 경우 어떤 그림 (원, 다각형)이 어떤 이벤트를 감지하는지 어떻게 알 수 있습니까? google maps api javascript

답변

관련 문제