Google Maps Api v3-가장 가까운 마커 찾기


89

지도를 클릭 할 때 가장 가까운 마커를 찾는 가장 좋은 방법은 무엇입니까? 내가 그렇게하는 데 도움이 될 API에 몇 가지 기능이 있습니까?

Google지도 API v3입니다.


1
마커의 좌표를 저장하기 위해 데이터베이스를 사용합니까?
Argiropoulos Stavros

물론 마커 위치는 mysql datbase에 저장됩니다.
user198003

답변:


113

먼저 이벤트 리스너를 추가해야합니다.

google.maps.event.addListener(map, 'click', find_closest_marker);

그런 다음 마커 배열을 반복하는 함수를 만들고 haversine 공식 을 사용 하여 클릭에서 각 마커의 거리를 계산합니다.

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);
}

이것은 가장 가까운 마커를 추적하고 제목을 알려줍니다.

지도 객체에 마커가 배열로 있습니다.


2
오래된 스레드를 열지 않으려 고했지만 이것을 구현하려고 시도했으며 가장 가까운 것을 찾는 것보다 동쪽으로 검색하는 것 같습니다. 따라서 내가 위치를 검색하면 서쪽에 REAL이 가까운 경우에도 동쪽으로 검색하여 가장 가까운 곳을 찾습니다. 말이 돼?
LeeR

@Lee-이치에 맞지만 문제를 복제 할 수 없습니다
Galen

1
예, 이것은 전혀 작동하지 않았습니다. 캘리포니아 위치에 저를 배치하고 NY에 있습니다. 그리고 내 위치에 마커가 있습니다. 그래도 마커를 찾았습니다!
mheavers

@mheavers-코드에 오류가 있습니다. from (i = 1에서 from (i = 0. 첫 번째 마커를 포함하지 않았습니다.
갈레노스

1
@Magico 당신은 자바 스크립트를 PHP 코드로 바꿀 수 없습니다. 대답과 같이 자바 스크립트 코드를 생성하는 PHP 래퍼를 작성할 수 있습니다. 혼자서 할 수 없다면 PHP를 전혀 사용하지 마십시오.
Daniel W.


30

Leor 's를 확장하고 싶습니다. 가장 가까운 위치를 계산하고 실제로 작동하는 솔루션을 제공하는 방법에 대해 혼란스러운 사람 위해 제안 .

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개체입니다.


1
멋진 대답!
세자르 알론소

깔끔하고 깨끗한 답변!
TheeBen

마커를 거리별로 정렬 한 다음 하나만 반환하는 데 사용할 수 있습니까?
루이 W

물론 @Louis, 필터 방법을 찾아보십시오. 당신은 그들을 정렬하는 데 사용할 수 있습니다
Jonathan

1
위치 개체에서 위치를 제거하여 작동하게했습니다. 다음과 같이 : computeDistanceBetween (location, prev.position) ... 위치가 이미 LatLng 객체이기 때문입니다.
holm50

9

위의 공식은 저에게 효과가 없었지만 문제없이 이것을 사용했습니다. 현재 위치를 함수에 전달하고 마커 배열을 반복하여 가장 가까운 위치를 찾습니다.

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]);
}

1
markers어레이를 어떻게 채웁 니까? 를 사용하여 마커를 만드는 것 var marker1 = new google.maps.Marker({ ... })입니까?
enchance

1
@enchance 나는 이것을해야했다 : map.markers = map.markers || [];각 마커에 대해map.markers.push(marker);
travis


4

저에게 잘 작동하는 또 다른 함수는 킬로미터 단위로 거리를 반환합니다.

 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;
    }

3

computeDistanceBetween () Google지도 API 메서드를 사용하여 위치와 Google지도의 마커 목록 사이의 근처 마커를 계산합니다.

단계 :-

  1. 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 }); }

  2. 마우스를 클릭하면 위치의 위도, 경도를 얻기위한 이벤트를 생성하고 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());
        }
    

이 링크를 방문 하여 단계를 따르십시오. 당신은 당신의 위치에 더 가까운 마커를 얻을 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.