mapbox - Mpabox GL 放置图层悬停偏移

Question

单击这些标记时，我已经设置了带有标记和弹出窗口的地图。我的问题是标记的可点击部分位于标记及其文本下方的 waaaaaaaay，因此我可以从非常尴尬的位置单击它。任何想法如何设置或更改标记的那部分？

（我无法使 codepen 工作，但我在这里分享一个图表）

例子

很明显，红色区域是什么都没有发生的部分，我想扩展该点的“可点击性”。

绿色部分是可点击的部分，你可以看到它在点下很长。

蓝点或多或少是该点实际所在的位置。

这是生成弹出窗口的代码。

map.loadImage(
    "http://localhost/healing-hub/wp-content/uploads/2020/08/Map-marker.png",
    function (error, image) {
      if (error) throw error;
      map.addImage("hh-marker", image);
      map.addSource("point", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: [{
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [0, 0],
            },
          }, ],
        },
      });

      map.addLayer({
        id: "places",
        type: "symbol",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: featureCollection,
          },
        },
        layout: {
          "icon-image": "hh-marker",
          "icon-size": .45,
          "icon-anchor": 'bottom',
          "icon-offset": [0, 0],
          "text-field": "{title}",
          "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
          "text-offset": [0, 0],
          "text-anchor": "top",
        },
        paint: {
          "icon-translate": [0, 0],
        }
      });
    }
  );

我尝试过图标锚点、图标翻译，但这只会移动图像而不是可点击的部分。

图标偏移确实取代了那部分，它使它变得非常尴尬，并且不能在视觉上正确地指向该位置。此外，我发现使用图标锚和图标翻译实际上有两个单独的点击区域，一个在图像下方，一个在标题下方。

感谢帮助！

标签： mapboxmapbox-gl-jsmapbox-marker