时间戳

首页 > 解决方案 > 获取地图框地图范围内的标记列表

javascript - 获取地图框地图范围内的标记列表

问题描述

我正在尝试获取地图范围内的所有标记。当用户与地图交互（放大/缩小、移动、单击）时，我想获取地图边界内的所有标记以显示这些标记的列表。

我尝试实现此示例中的一些功能，但没有任何运气：https ://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/

这是 codepen 上地图的工作版本：https ://codepen.io/anon/pen/MPGgWq

我查看了它在功能和范围中返回的内容，但这些信息都无法帮助我完成此任务。我正在使用标记，因此我可以显示自定义标记图像并设置出现在弹出框中的描述。

map.on('moveend', function (e) {
    var features =  map.queryRenderedFeatures();
    var bounds = map.getBounds();

    console.log(features);
    console.log(bounds);
});

标签： javascripthtmlmapboxmapbox-gl-jsmarkers

解决方案

1) Mapbox gl js don't store references for markers- https://github.com/mapbox/mapbox-gl-js/issues/5821#issuecomment-356704579

2) 如果标记被添加到地图并且没有被保存，那么它的唯一表示就是地图容器内的 html 元素。

3）因此您可以使用getBoundingClientRect来确定标记是否在地图容器中可见：

function intersectRect(r1, r2) {
  return !(r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top);
}

function getVisibleMarkers() {
  var cc = map.getContainer();
  var els = cc.getElementsByClassName('marker');
  var ccRect = cc.getBoundingClientRect();
  var visibles = [];
  for (var i = 0; i < els.length; i++) {
    var el = els.item(i);
    var elRect = el.getBoundingClientRect();
    intersectRect(ccRect, elRect) && visibles.push(el);
  }
  if (visibles.length > 0) console.log(visibles);
}

[ https://jsfiddle.net/rkqdz5g2/ ]

推荐阅读