Google Maps API v3-最寄りのマーカーを見つける


89

地図をクリックすると、最も近いマーカーを見つけるのに最適な方法はどれですか?私がそれを行うのに役立ついくつかの関数がAPIにありますか?

google map api v3です。


1
マーカーの座標を保存するためにデータベースを使用していますか?
Argiropoulos Stavros、

確かに、マーカーの位置はmysql datbaseに保存されます。
user198003

回答:


112

まず、イベントリスナーを追加する必要があります

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、2011年

@リー-理にかなっているが、問題を再現することはできない
Galen

1
ええ、これは私にはまったくうまくいきませんでした-私をカリフォルニアの場所に連れて行って、私はニューヨークにいます。そして、私の場所にマーカーがあります。マーカーは見つかりました!
mheavers

@mheavers-コードにエラーがあります。。。(私は、(i = 0これは、最初のマーカーを含めなかったからに= 1からの変更
ガレン

1
@Magico JavaScriptをPHPコードに変換することはできません。あなたは答えのようにJavaScriptコードを生成するPHPラッパーを書くことができます。自分でできない場合は、phpをまったく使用しないでください...
Daniel W.


30

レアーの提案を拡張したい、最も近い場所を計算する方法で混乱し、実際に機能するソリューションを提供する方法について混乱している人のためのます。

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
素晴らしい答え!
Cesar Alonso

清楚な答え!
TheeBen 2017

これを使用して、マーカーを単に返すのではなく、距離で並べ替えることができますか?
Louis W

確かに@ Louis、filterメソッドを調べてください。それを使用してそれらを並べ替えることができます
ジョナサン

1
ロケーションオブジェクトの位置を削除することで機能しました。like like:computeDistanceBetween(location、prev.position)...場所はすでにLatLngオブジェクトであるため。
holm50 2017年

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({ ... })ですか?
12

1
@enchance私はこれをしなければなりませんでした:map.markers = map.markers || [];それから各マーカーについてmap.markers.push(marker);
トラビス


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. グーグルマップ上にマーカーを作成します。
    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.