【问题标题】:mapbox Pan a Map to Marker and Popupmapbox 将地图平移到标记和弹出窗口
【发布时间】:2014-09-18 11:54:59
【问题描述】:

是否可以在 中将地图平移到关于弹出height 的标记onClick

目前,弹出窗口消失在地图的掩码后面。我正在寻找一种解决方案,以适应地图、标记和弹出窗口(例如添加一些顶部填充)。

featureLayer.on('click', function(e) {
   var latLng = e.layer.getLatLng();
   map.panTo(latLng);
});

【问题讨论】:

  • 每个标记的缩放级别和弹出窗口是否固定?如果是这样,似乎您可以在 panTo 之前添加一些固定的纬度单位。
  • 你有这方面的例子吗? Mapbox 通常会移动地图以适应叠加层

标签: mapbox javascript mapbox geo


【解决方案1】:

我找到了原生解决方案。

您需要在bindPopup() 命令中添加参数keepInView

layer.bindPopup('<p>Hello</p>', {keepInView: true});

Documentation

【讨论】:

  • 从文档中看,这是否意味着您无法将地图从弹出窗口中完全滚动出来,而且在打开后很长时间也是如此?
【解决方案2】:

回答这个问题已经很晚了,但我遇到了它,所以其他人也可能会这样做。我遇到了类似的问题,Dan Mandle answered 在类似问题上使用这段代码:

map.on('popupopen', function(e) {
var px = map.project(e.popup._latlng); // find the pixel location on the map where the popup anchor is
px.y -= e.popup._container.clientHeight/2 // find the height of the popup container, divide by 2, subtract from the Y axis of marker location
map.panTo(map.unproject(px),{animate: true}); // pan to new center

});

这段代码对我来说非常有用,并且仍然允许在弹出窗口打开后平移地图,这与使用 keepInView 不同。

【讨论】:

  • 这听起来正是我想要的,谢谢你的想法,很高兴有这个项目/取消项目开箱即用:) 这种方法也适用于 Mapbox GL JS,它是现在首选的 SDK ,并且没有实现 keepinview/autopan 功能,所以如果默认的弹出框锚定对您不利,则必须使用投影。
  • 大声笑,但只是注意到 panBy 接受像素坐标作为偏移量,因此,它更容易,甚至可以处理任何音高:D
  • 虽然如果您从透视图中查看地图,panBy() 将不会给出与预期相同的结果,即使您计算填充/偏移量,由于间距,您的距离不会相同,因为您的弹出窗口与地图平面的角度不同。因此,需要进行一些更复杂的计算才能获得正确的 panBy 偏移量,以实现与从上方查看地图时相同的结果:(
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多