时间戳

首页 > 解决方案 > 在 Mapbox GL JS 中的地理编码器结果后添加可拖动标记

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

问题描述

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

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

标签： angularmapbox-gl-js

解决方案

我尝试了您的方法，但也没有按照我的方式解决。我猜 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()从地图中删除结果，也从文本字段中删除结果。

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

推荐阅读