Google Maps Api v3- 가장 가까운 마커 찾기
지도를 클릭 할 때 가장 가까운 마커를 찾는 가장 좋은 방법은 무엇입니까? 내가 그렇게하는 데 도움이 될 API에 몇 가지 기능이 있습니까?
Google지도 API v3입니다.
먼저 이벤트 리스너를 추가해야합니다.
google.maps.event.addListener(map, 'click', find_closest_marker);
그런 다음 마커 배열을 반복하는 함수를 생성 하여 공식 을 사용 하여 클릭에서 각 마커의 거리를 계산합니다.
function rad(x) {return x*Math.PI/180;}
function find_closest_marker( event ) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
var R = 6371; // radius of earth in km
var distances = [];
var closest = -1;
for( i=0;i<map.markers.length; i++ ) {
var mlat = map.markers[i].position.lat();
var mlng = map.markers[i].position.lng();
var dLat = rad(mlat - lat);
var dLong = rad(mlng - lng);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
distances[i] = d;
if ( closest == -1 || d < distances[closest] ) {
closest = i;
}
}
alert(map.markers[closest].title);
}
이것은 가장 가까운 마커를 추적하고 제목을 알려줍니다.
지도 개체에 마커가 배열로 있습니다.
google.maps.geometry.spherical 네임 스페이스 에서 computeDistanceBetween () 메서드를 사용할 수 있습니다 .
가장 가까운 위치를 계산하고 실제로 작동하는 솔루션을 제공하는 방법에 대해 혼란스러운 사람 을 위해 Leor의 제안 을 확장하고 싶습니다 .
markers
예를 들어 배열 에서 마커를 사용하고 var markers = [];
있습니다.
그런 다음 우리의 입장을 var location = new google.maps.LatLng(51.99, -0.74);
그런 다음 우리가 가진 위치에 대해 마커를 간단히 줄입니다.
markers.reduce(function (prev, curr) {
var cpos = google.maps.geometry.spherical.computeDistanceBetween(location.position, curr.position);
var ppos = google.maps.geometry.spherical.computeDistanceBetween(location.position, prev.position);
return cpos < ppos ? curr : prev;
}).position
튀어 나온 것은 가장 가까운 마커 LatLng
개체입니다.
위의 공식은 저에게 효과가 없었지만 문제없이 사용했습니다. 현재 위치를 함수에 전달하고 마커 배열을 반복하여 가장 가까운 위치를 찾습니다.
function find_closest_marker( lat1, lon1 ) {
var pi = Math.PI;
var R = 6371; //equatorial radius
var distances = [];
var closest = -1;
for( i=0;i<markers.length; i++ ) {
var lat2 = markers[i].position.lat();
var lon2 = markers[i].position.lng();
var chLat = lat2-lat1;
var chLon = lon2-lon1;
var dLat = chLat*(pi/180);
var dLon = chLon*(pi/180);
var rLat1 = lat1*(pi/180);
var rLat2 = lat2*(pi/180);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(rLat1) * Math.cos(rLat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
distances[i] = d;
if ( closest == -1 || d < distances[closest] ) {
closest = i;
}
}
// (debug) The closest marker is:
console.log(markers[closest]);
}
Mysql Spatial 확장에 대해 알고 계십니까 ?
MBRContains (g1, g2) 와 같은 것을 사용할 수 있습니다 .
저에게 잘 작동하는 또 다른 함수는 킬로미터 단위로 거리를 반환합니다.
function distance(lat1, lng1, lat2, lng2) {
var radlat1 = Math.PI * lat1 / 180;
var radlat2 = Math.PI * lat2 / 180;
var radlon1 = Math.PI * lng1 / 180;
var radlon2 = Math.PI * lng2 / 180;
var theta = lng1 - lng2;
var radtheta = Math.PI * theta / 180;
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist);
dist = dist * 180 / Math.PI;
dist = dist * 60 * 1.1515;
//Get in in kilometers
dist = dist * 1.609344;
return dist;
}
computeDistanceBetween () Google지도 API 메소드 를 사용하여 Google지도 의 위치와 마커 목록 사이의 근처 마커를 계산합니다.
단계 :-
Google지도에 마커를 만듭니다.
function addMarker(location) { var marker = new google.maps.Marker({ title: 'User added marker', icon: { path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, scale: 5 }, position: location, map: map }); }
마우스를 클릭하면 위치의 위도, 경도를 얻기위한 이벤트를 생성하고 find_closest_marker ()에 전달합니다.
function find_closest_marker(event) { var distances = []; var closest = -1; for (i = 0; i < markers.length; i++) { var d = google.maps.geometry.spherical.computeDistanceBetween(markers[i].position, event.latLng); distances[i] = d; if (closest == -1 || d < distances[closest]) { closest = i; } } alert('Closest marker is: ' + markers[closest].getTitle()); }
이 링크를 방문 하여 단계를 따르십시오. 당신은 당신의 위치에 더 가까운 마커를 얻을 수 있습니다.
참고 URL : https://stackoverflow.com/questions/4057665/google-maps-api-v3-find-nearest-markers
'IT' 카테고리의 다른 글
Vim에 타임 스탬프를 삽입하는 가장 좋은 방법은 무엇입니까? (0) | 2020.09.15 |
---|---|
왼쪽 외부는 Rails 3에서 결합됩니다. (0) | 2020.09.15 |
OAuth 2.0 인증 헤더 (0) | 2020.09.15 |
OS X Mavericks 용 Eclipse Kepler, Java SE 6 요청 (0) | 2020.09.15 |
C ++에서 배열을 선언하는 방법은 무엇입니까? (0) | 2020.09.15 |