Нужно создать собственный фильтр для маркеров на Google Maps - с чего начать

Question

Я здесь немного рассол. Я настроил объект Google Maps, который показывает местоположение аэропорта с помощью маркеров. Я даже включил кластеризацию в определенной степени. Дело в том, что мне нужно включить фильтр, который позволит пользователям:

Отфильтруйте и покажите определенные типы аэропортов, т. Е. Установив соответствующий флажок Показывать маркеры на определенном расстоянии от центральной точки. Как показать все маркеры в радиусе # миль. Пользователь может ввести значение в текстовое поле, чтобы увидеть это, или использовать ползунок.

Я довольно застрял с уважением, когда начинаю это - мне нужна помощь в этом.

Answer 1

Что вы можете сделать, это нарисовать свой круг (в ответ на ввод пользователя). Затем нарисуйте маркеры, которые попадают в эти границы. Каждый раз, когда вы перерисовываете круг, также перерисовывайте все маркеры.

// draw a circle of appropriate radius
var circleOptions = {
    center: destinationLatlng,
    radius: 500,  // or value from some formfield, in metres
    fillColor: "#FF0000",
    fillOpacity: 0.2,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 1
};

var circle = new google.maps.Circle(circleOptions);

var bounds = circle.getBounds();

// loop over your markers, and only draw the ones that are within these bounds
for (var i = 0; i < arrMarkers.length; i++) {
    if (bounds.contains(arrMarkers[i].getPosition())) {
        // only do setMap if the marker wasn't already visible 
        if (arrMarkers[i].getVisible() != true) {
            arrMarkers[i].setMap(map);
            arrMarkers[i].setVisible(true);
        }
    } else {
    // remove the ones that are not within the circle's bounds
        arrMarkers[i].setMap(null);
        arrMarkers[i].setVisible(false);
    }
}

Вы заметите, что я делаю и setMap, и setVisible. Это сделано для того, чтобы я мог затем использовать getVisible, чтобы определить, нужно ли мне повторить setMap (чтобы избежать ненужных вызовов функций для setMap - я думаю, у меня возникла проблема с мерцанием).

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

Конечно, это предполагает, что вы действительно хотите отобразить круг на карте, показывая этот радиус; Я считаю это полезным. Однако, если вы этого не сделаете, вы можете использовать точно такое же сообщение, но просто установите для параметра fillOpacity и strokeOpacity значение 0.0.

Answer 2

Организация ссылок на маркеры по категориям при добавлении их на карту:

var markers = { cat1: [...markers...], cat2: [...markers...] }

Когда пользователь выбирает тип Cirtain - просто установите или отмените карту для этих маркеров в markers.catN