ближайшие 5 место (маркер) на карте Google

Question

Я использую карту Google, чтобы положить свои маркеры JSon на карте (this is my map website) и это мой основной код

function initialize(pram) { 

var mapOptions = { 
    center: new google.maps.LatLng(33.3118943, 44.4959916), 
    zoom: 11, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var infoWindow = new google.maps.InfoWindow(); 
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

$.getJSON('data.php?search=' + pram, function (data) { 

    $.each(data.points, function (i, value) { 

     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(value.lat, value.lon), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', portInfo); 

     function portInfo() { 
      $("#moreInfoId").html(value.id); 
      $("#moreInfoPortName").html(value.port_name); 
      $("#moreInfoTime").html(value.time); 
      $('#mapModal').modal(); 
     } 
    }); 
}); 

}

Я просто хочу, когда я нажимаю на marker его ближайшие ближайшие 5 маркеров как я это делаю?

Answer 1

Одним из подходов может быть логика определения расстояния между двумя точками. Затем используйте эту логику для сортировки массива маркеров (вам нужно будет хранить их в массиве) и получить первые пять.

Сортировка имеет в качестве аргументов объекты, которые он использует для сравнения, поэтому вам нужно частично применить объект, который вы берете в качестве ссылки для вычисления расстояния. Это может быть логика для выполнения сортировки:

function distance(p1, p2) { 
 
    return Math.sqrt(Math.pow((p2.lat - p1.lat), 2) + Math.pow((p2.lon - p1.lon), 2)); 
 
} 
 

 
function sortByDistance(me, a, b) { 
 
    return a === me ? 1 : b === me ? -1 : distance(me, a) - distance(me, b); 
 
} 
 

 
var dummy = [{lat: 6, lon: 6}, {lat: 7, lon: 1}, {lat: 1, lon: 8}, {lat: 9, lon: 10}, {lat: 5, lon: 4}, {lat: 3, lon: 2}, {lat: 6, lon: 7}, {lat: 2, lon: 7}, {lat: 10, lon: 9}, {lat: 4, lon: 3}]; 
 

 
dummy.forEach(function(me) { 
 
    console.log('My five nearest points are:'); 
 
    console.log(dummy.sort(sortByDistance.bind(null, me)).slice(0, 5)); 
 
});

Тогда вы будете использовать эту логику в ваших:

function initialize(pram) { 
 

 
    var mapOptions = { 
 
    center: new google.maps.LatLng(33.3118943, 44.4959916), 
 
    zoom: 11, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 

 
    $.getJSON('data.php?search=' + pram, function(data) { 
 
    // Array to store the markers. 
 
    var markers = []; 
 
    $.each(data.points, function(i, value) { 
 

 
     var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(value.lat, value.lon), 
 
     map: map 
 
     }); 
 

 
     // Store the marker in the array 
 
     markers.push(marker); 
 
     google.maps.event.addListener(marker, 'click', portInfo); 
 

 
     function portInfo() { 
 
     // Use the functions I presented earlier to sort the array and retrieve the nearest five 
 
     var nearestFive = markers.sort(sortByDistance.bind(null, value)).slice(0, 5); 
 
     $("#moreInfoId").html(value.id); 
 
     $("#moreInfoPortName").html(value.port_name); 
 
     $("#moreInfoTime").html(value.time); 
 
     $('#mapModal').modal(); 
 
     } 
 
    }); 
 
    }); 
 

 
}

Это будет главным идея. Я думаю, вам придется внести некоторые корректировки и проверить, хорошо ли это работает, но для получения ближайших пяти вам нужно отсортировать массив на основе расстояния до определенного значения. Чтобы сделать его более эффективным, вы можете сохранить это примерно так же, как пять, чтобы избежать необходимости пересчитывать их каждый раз, когда пользователь нажимает на маркер, но это то, что я оставляю вам.

Надеюсь, это поможет.