Mapbox.GL：滚动放大和缩小到自定义 mapbox 地图上的特定坐标答案

【问题标题】：Mapbox.GL: scroll zoom in and out to specific coordinates on custom mapbox mapMapbox.GL：滚动放大和缩小到自定义 mapbox 地图上的特定坐标
【发布时间】：2016-02-19 16:37:14
【问题描述】：

我在我的网站上嵌入了一个自定义 mapbox studio 地图并设置了 minZoom 和 maxZoom 坐标，因此它只缩小到某个缩放级别并放大到某个缩放级别。但是当用户重新放大时，地图会转到用户放置鼠标指针的位置，这是正确的，但是我希望它放大回到它的起点，而不是用户放置鼠标指针的位置。
这是我找到的最接近的示例，但我不想要叙述，我希望用户只在地图上滚动：https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/

如何使当用户向下滚动嵌入地图时缩小到特定的坐标集，而当用户向上滚动时，嵌入的地图又放大到特定的坐标集？

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [-118.451784, 34.035947], // starting position
zoom: 11.66,
maxZoom: 11.66, // starting zoom
minZoom: 1.4, // ending zoom
doubleClickZoom: false,
dragRotate: false,
dragPan: false

});

【问题讨论】：

奇怪的是，如果通过React Mapbox GL 设置坐标，缩放到固定坐标恰好是开箱即用的行为。要更接近默认的 mapbox 行为，请查看他们的 onDragEnd 事件。

标签： javascript jquery zooming mapbox-gl mapbox-gl-js

【解决方案1】：

不幸的是，这对于现有的 mapbox-gl-js API 来说并不容易。我推荐disabling all the built-in interaction handlers 并为调用Map#setZoom 的wheel event 编写自己的事件处理程序

【讨论】：