在 Mapbox GL JS 中的地理编码器结果后添加可拖动标记

Question

我正在尝试在 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
});

我有什么想法可以解决这个问题吗？

Answer 1

我尝试了你的方法，但它也不适合我。我想 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)
});

事件的结果具有 center 属性，可用于在同一位置创建新标记。您可以使标记可拖动并添加您自己的弹出窗口。请务必查看事件结果并检查它是否包含对您有价值的信息。geocoder.clear()从地图和文本字段中删除结果。

我为您创建了一个小提琴，您可以在其中看到正在运行的脚本：Fiddle