Радиус / ближайшие результаты - Google Maps API

Question

Прежде всего я использую Google Maps API v3.У меня есть одна большая карта, на которой показаны все результаты, извлеченные из базы данных, теперь мне нравится реализовывать функцию, которая показывает радиус ближайших результатов в пределах X километров от текущего местоположения (обслуживается геолокацией HTML5).

Каккарта содержит все результаты, я хочу иметь возможность добавить X километров, затем будет отправлено, что результаты будут возвращены ближайшие результаты в соответствии с текущим местоположением пользователя.Затем вся карта должна удалить все маркеры вне радиуса , оставляя маркеры, которые находятся в радиусе X километров.

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

Answer 1

Вот демоверсия JSFiddle:

Полагаю, это один из способов сделать это.Вы можете использовать круг Google Map V3 API , чтобы создать границы от вашей центральной точки или текущего местоположения.Вы можете указать радиус круга в метрах с помощью setRadius(radius:number).С созданным кругом вы можете перебрать свои маркеры и посмотреть, находятся ли они в пределах круга, используя объект getBounds круга, который является LatLngBounds , и проверить, находится ли маркер внутри границы или нет.

Я пошел дальше и создал маленькую демонстрацию с пятью точками на карте, и когда вы нажмете кнопку «Создать круг», она сделает первый маркер центральной точкой, нарисует круг с радиусом 5000 и отфильтрует маркеры, которыене связаны с использованием описанного выше метода:

function createRadius(dist) {
    var myCircle = new google.maps.Circle({
        center: markerArray[markerArray.length - 1].getPosition(),
        map: map,
        radius: dist,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });
    var myBounds = myCircle.getBounds();

    //filters markers
    for(var i=markerArray.length;i--;){
         if(!myBounds.contains(markerArray[i].getPosition()))
             markerArray[i].setMap(null);
    }
    map.setCenter(markerArray[markerArray.length - 1].getPosition());
    map.setZoom(map.getZoom()+1);
}

Answer 2

У этого решения есть только один существенный недостаток - оно выбирает данные в прямоугольнике, а не в кругу.

Если вы не хотите запрашивать больше данных, чем требуется - используйте формулу haversine в SQL:

SELECT
    id,
    (3959 *
        acos(
            cos(radians(37)) *
            cos(radians(lat)) *
            cos(radians(lng) - radians(-122)) +
            sin(radians(37)) *
            sin(radians(lat))
        )
    ) AS distance
FROM markers
HAVING distance < 25
ORDER BY distance
LIMIT 0 , 20;

Также оформить заказ Создание локатора магазина с PHP, MySQL и Google Maps