Google Maps Api v3: trova gli indicatori più vicini


89

Quando clicco sulla mappa, quale sarà il modo migliore per trovare marker o marker più vicini? ci sono alcune funzioni in api che mi aiuteranno a farlo?

è google map api v3.


1
Usi qualche database per memorizzare le coordinate dei marker?
Argiropoulos Stavros

certo, le posizioni dei marker sono memorizzate nel database mysql.
user198003

Risposte:


112

Per prima cosa devi aggiungere il listener di eventi

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

Quindi creare una funzione che ripercorra la matrice di marker e utilizzi la formula haversine per calcolare la distanza di ciascun marker dal clic.

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

Questo tiene traccia degli indicatori più vicini e avvisa il suo titolo.

Ho i miei marker come array sul mio oggetto mappa


2
Non per aprire un vecchio thread, ma ho provato a implementarlo, e sembra cercare verso est piuttosto che trovare il più vicino. Quindi, se cerco una posizione, cercherà a est e troverà la più vicina in quel modo, anche se c'è una VERA chiusura a ovest. Ha senso?
LeeR

@Lee - ha senso, ma non posso riprodurre il problema
Galen

1
Sì, questo non ha funzionato affatto per me - mettimi nella nostra sede in California e sono a New York. E c'è un indicatore nella mia posizione. Tuttavia ha trovato un indicatore!
mheavers

@mheavers - C'è un errore nel codice. cambia da (i = 1 a da (i = 0. Non includeva il primo marcatore.
Galen

1
@Magico non puoi trasformare javascript in codice php. puoi scrivere un wrapper php che genera codice javascript come nella risposta. Se non puoi farlo da solo, non usare affatto php ...
Daniel W.


30

Vorrei espandere il suggerimento di Leor per chiunque sia confuso su come calcolare la posizione più vicina e fornire effettivamente una soluzione funzionante:

Sto usando i marcatori in una markersmatrice es var markers = [];.

Allora assumiamo la nostra posizione come qualcosa di simile var location = new google.maps.LatLng(51.99, -0.74);

Quindi riduciamo semplicemente i nostri indicatori rispetto alla posizione che abbiamo in questo modo:

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

Quello che viene fuori è il tuo LatLngoggetto marker più vicino .


1
risposta fantastica!
Cesar Alonso

Risposta chiara e pulita!
TheeBen

Potrebbe essere usato per ordinare i marker in base alla distanza, piuttosto che restituirne uno solo?
Louis W

Certo @Louis, cerca il metodo di filtro. Puoi usarlo per ordinarli
Jonathan

1
Ho funzionato rimuovendo la posizione sull'oggetto posizione; in questo modo: computeDistanceBetween (location, prev.position) ... perché location è già un oggetto LatLng.
holm50

9

La formula sopra non ha funzionato per me, ma l'ho usata senza problemi. Passa la tua posizione corrente alla funzione e scorri una serie di indicatori per trovare il più vicino:

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
Come si popola l' markersarray? È creando un marcatore usando var marker1 = new google.maps.Marker({ ... })?
enchance

1
@Enchance ho dovuto fare questo: map.markers = map.markers || [];quindi per ogni markermap.markers.push(marker);
travis


4

Ecco un'altra funzione che funziona alla grande per me, restituisce la distanza in chilometri:

 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

Utilizza il metodo dell'API di Google map computeDistanceBetween () per calcolare l'indicatore vicino tra la tua posizione e l'elenco degli indicatori sulla mappa di Google.

Passaggi: -

  1. Crea marker su google map.
    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. Al clic del mouse crea un evento per ottenere la latitudine, la lunghezza della tua posizione e passalo a 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());
        }
    

visita questo link segui i passaggi. Sarai in grado di avvicinarti all'indicatore della tua posizione.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.