Добавить перетаскиваемый маркер после результата геокодирования в Mapbox GL JS - PullRequest
Новая
       6

Добавить перетаскиваемый маркер после результата геокодирования в Mapbox GL JS

1 голос
/ 16 июня 2020

Я пытаюсь добавить перетаскиваемый маркер после результата геокодирования в Mapbox GL JS и настроить событие dragend. Мне это нужно, чтобы пользователь мог перетащить маркер в нужное ему место.

Это руководство, которому я следовал: Установить точку после результата геокодирования

В этом уроке я мог бы добавить маркер с опцией перетаскивания, но я не знаю, как добавить событие dragend к маркеру. 

 var geocoder = new MapboxGeocoder({
      accessToken: Mapboxgl.accessToken,
      language: 'pt-BR',
      marker: {
        draggable: true,
        color: 'red'
      },
      placeholder: 'Pesquise por cidade, rua, bairro ou CEP',
      mapboxgl: Mapboxgl
  });

Я попытался создать маркер и установить его на свойство маркера, но безуспешно: 

const marker = new Mapboxgl.Marker({      
  draggable: true
});

marker.on('dragend', () => {
  console.log(marker.getLngLat());
});

var geocoder = new MapboxGeocoder({
  accessToken: Mapboxgl.accessToken,
  language: 'pt-BR',
  marker: marker,
  placeholder: 'Pesquise por cidade, rua, bairro ou CEP',
  mapboxgl: Mapboxgl
});

Есть идеи, как я могу решить эту проблему?

1 Ответ

2 голосов
/ 16 июня 2020

Я попробовал ваш подход, и он тоже не сработал. Я предполагаю, что GeoCoder-Marker вообще не предназначен для перетаскивания. Однако можно получить результат геокодирования следующим образом: 

geocoder.on('result', function(e) {
  console.log(e.result.center);
  geocoder.clear();
  var marker = new mapboxgl.Marker({ draggable: true, color: "pink" })
    .setLngLat(e.result.center)
    .addTo(map)
});

Результат события имеет центральный атрибут, который можно использовать для создания нового маркера в той же позиции. Вы можете сделать маркер перетаскиваемым и добавить собственное всплывающее окно. Обязательно ознакомьтесь с результатом мероприятия и проверьте, содержит ли он какую-либо ценную для вас информацию. geocoder.clear() удаляет результат с карты, но также и из текстового поля.

Я создал для вас скрипт, где вы можете увидеть скрипт в действии: Fiddle

...