Mapbox.GL: scroll zoom in and out to specific coor

问题:

I have embedded a custom mapbox studio map onto my site and set the minZoom and maxZoom coordinates so it only zooms out to a certain zoom level and zooms in to a certain zoom level. BUT when the user zooms back in, the map goes where the user places their mouse pointer, rightly so, BUT I want it to zoom back to it's starting point, not where the user places their mouse pointer.
This is the closest example I found, but I don't want the narrative, I want the user to just scroll on the map: https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/

How do I make it such that when the user scrolls down the embedded map zooms out to a certain set of coordinates and when the user scrolls back up, the embedded map zooms back in to a certain set of coordinates?

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

});

回答1:

Unfortunately, this isn't easy with the existing mapbox-gl-js API. I recommend disabling all the built-in interaction handlers and writing your own event handler for the wheel event that calls Map#setZoom