Google Maps Api v3 - temukan penanda terdekat


89

Saat saya mengklik peta, manakah cara terbaik untuk menemukan penanda atau penanda terdekat? apakah ada beberapa fungsi dalam api yang akan membantu saya melakukan itu?

itu google map api v3.


1
Apakah Anda menggunakan database apa pun untuk menyimpan coord penanda?
Argiropoulos Stavros

Tentu, posisi penanda disimpan di database mysql.
pengguna198003

Jawaban:


113

Pertama, Anda harus menambahkan eventlistener

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

Kemudian buat fungsi yang mengulang melalui larik penanda dan menggunakan rumus haversine untuk menghitung jarak setiap penanda dari klik.

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

Ini melacak penanda terdekat dan memberi tahu judulnya.

Saya memiliki penanda sebagai larik pada objek peta saya


2
Bukan untuk membuka utas lama, tetapi saya telah mencoba menerapkan ini, dan tampaknya mencari ke timur daripada menemukan yang terdekat. Jadi jika saya mencari lokasi, itu akan mencari ke timur dan menemukan yang terdekat dengan cara itu, bahkan jika ada REAL dekat di barat. Apakah itu masuk akal?
LeeR

@Lee - masuk akal, tetapi saya tidak bisa menduplikasi masalah
Galen

1
Ya, ini sama sekali tidak berhasil untuk saya - taruh saya di lokasi California kami dan saya di NY. Dan ada penanda di lokasi saya. Itu memang menemukan penanda!
mheavers

@mheavers - Ada kesalahan pada kode. ubah dari (i = 1 ke dari (i = 0. Itu tidak termasuk penanda pertama.
Galen

1
@Magico Anda tidak dapat mengubah javascript menjadi kode php. Anda dapat menulis pembungkus php yang menghasilkan kode javascript seperti pada jawaban. Jika Anda tidak dapat melakukannya sendiri, jangan gunakan php sama sekali ...
Daniel W.


30

Saya ingin memperluas saran Leor untuk siapa pun yang bingung tentang cara menghitung lokasi terdekat dan benar-benar memberikan solusi yang berfungsi:

Saya menggunakan penanda dalam markerslarik misalnya var markers = [];.

Kalau begitu mari kita posisikan sebagai sesuatu seperti var location = new google.maps.LatLng(51.99, -0.74);

Kemudian kami hanya mengurangi penanda kami terhadap lokasi yang kami miliki seperti:

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

Yang muncul adalah LatLngobjek penanda terdekat Anda .


1
jawaban yang luar biasa!
Cesar Alonso

Jawaban rapi & bersih!
TheeBen

Bisakah ini digunakan untuk mengurutkan penanda berdasarkan jarak, daripada hanya mengembalikan satu?
Louis W

Tentu @Louis, cari metode filter. Anda dapat menggunakannya untuk mengurutkannya
Jonathan

1
Saya membuatnya bekerja dengan menghapus posisi pada objek lokasi; seperti ini: computeDistanceBetween (location, prev.position) ... karena lokasi sudah menjadi objek LatLng.
holm50

9

Formula di atas tidak berhasil untuk saya, tetapi saya menggunakan ini tanpa masalah. Teruskan lokasi Anda saat ini ke fungsi, dan putar melalui larik penanda untuk menemukan yang terdekat:

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
Bagaimana Anda mengisi markersarray? Apakah dengan membuat penanda menggunakan var marker1 = new google.maps.Marker({ ... })?
enchance

1
@enchance Saya harus melakukan ini: map.markers = map.markers || [];lalu untuk setiap penandamap.markers.push(marker);
travis


4

Berikut adalah fungsi lain yang bekerja sangat baik untuk saya, mengembalikan jarak dalam kilometer:

 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

Gunakan metode Google map API computeDistanceBetween () untuk menghitung penanda dekat antara lokasi Anda dan daftar penanda di peta google.

Langkah:-

  1. Buat penanda di peta 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. Di Mouse klik buat acara untuk mendapatkan lintang, bujur dari lokasi Anda dan teruskan ke 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());
        }
    

kunjungi tautan ini ikuti langkah-langkahnya. Anda akan bisa mendapatkan penanda lebih dekat ke lokasi Anda.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.