Найти ближайшего маркера к моей геолокации API Карт Google V3

Question

У меня есть сценарий, показывающий карту Google, которую я внедрил в мою страницу, в настоящее время она показывает серию маркеров, созданных радар-поиском. Я думаю, что я могу поместить эти сгенерированные маркеры в массив, но я не уверен, как это сделать. Я также искал формулу «haversine formula», поскольку это, по-видимому, является одним из способов вычисления расстояния между Geolocation и точками в массиве. Я хочу иметь возможность использовать идентификатор тега «#findMe» для выполнения поиска, поэтому нажатие на него найдет ближайший маркер в моей геолокации, а затем распечатает с ним предупреждение. У меня была проблема с созданием метода google api, но я снова думаю, что мне нужно помещать маркеры в массив.

ПОПРАВКИ КОДЕКСА - Правильно ли это Dr.Molle?

jQuery(function($){ 

    var $overlay = $('.overlay'), 
     resize = true, 
     map; 
    var service; 
    var marker = []; 
    var pos; 
    var infowindow; 
    var placeLoc 


function initialize() { 
    /*var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

}*/ 
var mapOptions = { 
    zoom: 15 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 

      var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 

     var request = { 
     location:pos, 
     radius:1000, 

    }; 

    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch(request,callback); 
     pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 


     infowindow = new google.maps.InfoWindow({ 
     map: map, 
     position: pos, 
     content: 'You Are Here' 
     }); 
     $('#findMe').data('pos',pos); 

     map.setCenter(pos); 
    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 



    function callback(results, status) { 
     var markers = []; 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     markers.push(createMarker(results[i])); 
    } 
    } 
    $('#findMe').data('markers',markers); 
} 
} 

function createMarker(place) { 
    placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location, 
    icon: { 
     path: google.maps.SymbolPath.CIRCLE, 
     scale: 8, 
     fillColor:'00a14b', 
     fillOpacity:0.3, 
     fillStroke: '00a14b',  
     strokeWeight:4, 
     strokeOpacity: 0.7 
    }, 



    }); 


    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
    return marker; 
} 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 

    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

$('#show').click(function(){ 

    $overlay.show(); 

    if (resize){ 
    google.maps.event.trigger(map, 'resize'); 
    resize = false; 
    } 

}); 

$('.overlay-bg').click(function(){ 

    $overlay.hide(); 

}); 

$("#findMe").click(function() { 

    var pos  = $(this).data('pos'), 
     markers = $(this).data('markers'), 
     closest; 

    if(!pos || !markers){ 
    return; 
    } 

    $.each(markers,function(){ 
    var distance=google.maps.geometry.spherical 
        .computeDistanceBetween(this.getPosition(),pos); 
    if(!closest || closest.distance > distance){ 
     closest={marker:this, 
       distance:distance} 
    } 
    }); 
    if(closest){ 
    //closest.marker will be the nearest marker, do something with it 
    //here we simply trigger a click, which will open the InfoWindow 
    google.maps.event.trigger(closest.marker,'click') 
    } 
}); 


}); 

Answer 1

Наполнение массив с этими маркерами:

1. Пусть createMarker-функция возвращает маркер, добавьте это в конце функции:

   return marker; 
   

2. магазин массив (например, как свойство данных #findMe)

   function callback(results, status) { 
       var markers=[]; 
       if (status == google.maps.places.PlacesServiceStatus.OK) { 
       for (var i = 0; i < results.length; i++) { 
        markers.push(createMarker(results[i])); 
       } 
       } 
       $('#findMe').data('markers',markers); 
   } 
   

также сохраняет положение, возвращаемое геолокацией где-нибудь (например, также как данные #findMe):

//add this after defining pos in the success-callback of geolocation 
    $('#findMe').data('pos',pos); 

Чтобы найти ближайший маркер, вы можете использовать метод computeDistanceBetween -метод геометрии-библиотеки (не забудьте загрузить библиотеку, он не загружается по умолчанию)

$("#findMe").click(function() { 

    var pos  = $(this).data('pos'), 
     markers = $(this).data('markers'), 
     closest; 

    if(!pos || !markers){ 
    return; 
    } 

    $.each(markers,function(){ 
    var distance=google.maps.geometry.spherical 
        .computeDistanceBetween(this.getPosition(),pos); 
    if(!closest || closest.distance > distance){ 
     closest={marker:this, 
       distance:distance} 
    } 
    }); 
    if(closest){ 
    //closest.marker will be the nearest marker, do something with it 
    //here we simply trigger a click, which will open the InfoWindow 
    google.maps.event.trigger(closest.marker,'click') 
    } 
});