Добавление всплывающего окна после геокодирования результатов поиска - PullRequest
Новая
       24

Добавление всплывающего окна после геокодирования результатов поиска

0 голосов
/ 01 марта 2020

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

Однако я хотел бы добавить всплывающее окно при нажатии на маркер.

Я прочитал другую документацию по Mapbox на "всплывающее окно". Однако я не могу реализовать этот код.

Вот документация, которую я сейчас пытаюсь геокодировать: https://docs.mapbox.com/mapbox-gl-js/example/forward-geocode-custom-data/

1 Ответ

0 голосов
/ 01 марта 2020

Добро пожаловать! У меня была эта проблема долго go. У меня были полигоны, где мне нужно всплывающее окно, чтобы появиться на экране. Моими полигонами были районы океана, где были опасные моря (предупреждение для судов и т. Д. c). Здесь у меня есть функция, которая активирует onclick. Затем он гарантирует, что всплывающее окно появится в правильном порядке на экране, и при необходимости изменит стиль курсора мыши.

Я бы объяснил более подробно, но я думаю, что код по большей части не требует пояснений. Иногда трудно найти хорошие примеры в документации (хотя Mapbox в последнее время добивается больших успехов в документации).

Проверьте решение ниже и не стесняйтесь принять его, если оно работает для вас, в противном случае я может помочь с вопросами, а также, если вам нужно. Я прокомментировал это для вас. 

map.on('click', 'HazardousSeasWarning', function (e) {
var coordinates = e.features[0].geometry.coordinates[0][0].slice();  
var description = e.features[0].properties.description;


// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}

new mapboxgl.Popup()
.setLngLat(coordinates)
    .setHTML(description)
    .addTo(map);
});

// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'HazardousSeasWarning', function () {
    map.getCanvas().style.cursor = 'pointer';
});

// Change it back to a pointer when it leaves.
map.on('mouseleave', 'HazardousSeasWarning', function () {
    map.getCanvas().style.cursor = '';
});
...