在Mapbox GL JS中的地址解析器结果之后添加可拖动标记

Question

我正在尝试在Mapbox GL JS中的地址解析器结果之后添加一个可拖动标记，并设置一个dragend事件。我需要这样做，以便用户可以将标记拖动到他想要的确切位置。

这是我遵循的教程：Set a point after Geocoder result

通过本教程，我可以使用可拖动的选项添加标记，但是我不知道如何将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
  });

我尝试创建一个标记并将其设置为marker属性，但是没有成功：

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