在 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
  });

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

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)
});

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

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

Answer 2

@Lukas 你是对的。这是一些修改，它禁用了 Geolocation 标记选项。因此，不需要 geocoder.clear() 选项，主要是它不会从文本框中删除值。检查下面的代码片段

var geocoder = new MapboxGeocoder({
      accessToken: Mapboxgl.accessToken,
      marker: false,
      mapboxgl: Mapboxgl
  });

这里主要是marker:false

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

所以，geocoder.clear();不再需要了。

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

Add a dragable marker after geocoder result in Mapbox GL JS

mapbox-gl-js

angular