MapBox GL JS：使非交互式地图具有交互性

Question

In my web application, initially the map is set to be non-interactive (the user can't move around the map):

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v10',
    zoom: 11,
    interactive: false
});

However, when the user clicks a button, I want the map to become interactive (the user can move around the map). I've tried setting the interactive property to true, but it doesn't work:

map.interactive = true;

Any suggestions?

Answer 1

You're correct in that you cannot change the interactive option after you've instantiated your map instance. So it seems you have a couple of options:

1) Instantiate a new, non interactive map and replace the interactive one.

2) Disable pointer-events css rule on your map container element as mentioned in the issue tracker: https://github.com/mapbox/mapbox-gl-js/issues/7992

Good luck!