インタラクションの切替え
マップ上で UI ハンドラーを有効または無効にします。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>インタラクションの切替え</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><style>.listing-group {font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;font-weight: 600;position: absolute;top: 10px;right: 10px;z-index: 1;border-radius: 3px;max-width: 20%;color: #fff;} .listing-group input[type='checkbox']:first-child + label {border-radius: 3px 3px 0 0;} .listing-group label:last-child {border-radius: 0 0 3px 3px;border: none;} .listing-group input[type='checkbox'] {display: none;} .listing-group input[type='checkbox'] + label {background-color: #3386c0;display: block;cursor: pointer;padding: 10px;border-bottom: 1px solid rgba(0, 0, 0, 0.25);} .listing-group input[type='checkbox'] + label {background-color: #3386c0;text-transform: capitalize;} .listing-group input[type='checkbox'] + label:hover,.listing-group input[type='checkbox']:checked + label {background-color: #4ea0da;} .listing-group input[type='checkbox']:checked + label:before {content: '✔';margin-right: 5px;}</style><div id="map"></div><nav id="listing-group" class="listing-group"><input type="checkbox" id="scrollZoom" checked="checked"><label for="scrollZoom">Scroll zoom</label><input type="checkbox" id="boxZoom" checked="checked"><label for="boxZoom">Box zoom</label><input type="checkbox" id="dragRotate" checked="checked"><label for="dragRotate">Drag rotate</label><input type="checkbox" id="dragPan" checked="checked"><label for="dragPan">Drag pan</label><input type="checkbox" id="keyboard" checked="checked"><label for="keyboard">Keyboard</label><input type="checkbox" id="doubleClickZoom" checked="checked"><label for="doubleClickZoom">Double click zoom</label><input type="checkbox" id="touchZoomRotate" checked="checked"><label for="touchZoomRotate">Touch zoom rotate</label></nav> <script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11',center: [-77.04, 38.907],zoom: 11.15}); document.getElementById('listing-group').addEventListener('change', (e) => {const handler = e.target.id;if (e.target.checked) {map[handler].enable();} else {map[handler].disable();}});</script> </body></html>