使用 Mapbox API Geocoder Marker 的函数/事件答案

【问题标题】：functions/events using Mapbox API Geocoder Marker使用 Mapbox API Geocoder Marker 的函数/事件
【发布时间】：2020-08-11 15:14:49
【问题描述】：

我问这个是因为我已经在 Google Maps API 中完成了这项工作，但到目前为止还没有在 Mapbox API 上找到任何相关文档。我希望能够使用地理编码器标记创建函数。我发现关于操纵标记的最接近的事情是改变标记的颜色：

var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
marker: {
color: 'orange'
},
mapboxgl: mapboxgl
});

但是，我希望能够引用标记，以便可以基于 onmouseenter 和 onmouseleave 事件创建函数。有什么建议么？非常感谢。

【问题讨论】：

标签： mapbox mapbox-gl-js mapbox-gl mapbox-marker geocoder

【解决方案1】：

目前没有记录的方法可以访问 MapboxGeocoder 控件添加到地图的标记。

虽然不是公共 API 的一部分，但您可以通过 geocoder.mapMarker 访问标记，但由于公共 API 中没有记录它，因此它可能会在未来的版本中发生变化，并且无法保证使用。

一旦您引用了geocoder.mapMarker，您就可以使用geocoder.mapMarker.getElement() 获取实际的Marker 元素，并使用标准HTML/JS 在其上添加事件侦听器。

您也可以选择不使用内置标记，而是收听 MapboxGeocoder 事件并将您自己的标记放在地图上。

【讨论】：

geocoder.mapMarker.getElement() 不工作

【解决方案2】：

试试这个：

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

geocoder.on('result', e => {
    console.log(e.result.center);
});

【讨论】：