Манипуляторы (мышь, сенсорный, прокрутки) не работают на MapBox-ГЛ-JS карты в компоненте Vuejs одного файла

Question

У меня есть компонент Vuejs одного файла, который показывает карту штраф:

но ни один из (по умолчанию) обработчики, также не после того, как они были явными при инициализации.

Это единственный компонент файла:

<template> 
    <div id='map'></div> 
</template> 

<script> 
import mapboxgl from 'mapbox-gl' 

export default { 
    data() { 
    return {} 
    }, 
    ready() { 
    this.createMap() 
    }, 
    methods: { 
    createMap: function() { 
     mapboxgl.accessToken = [myapikey] 
     var simple = { 
     'version': 8, 
     'sources': { 
      'osm': { 
      'type': 'vector', 
      'tiles': ['https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-[myapikey]'] 
      } 
     }, 
     'layers': [{ 
      'id': 'background', 
      'type': 'background', 
      'paint': { 
      'background-color': '#bbccd2' 
      } 
     }, 
      { 
      'id': 'majorroad', 
      'source': 'osm', 
      'source-layer': 'roads', 
      'type': 'line' 
      }, 
      { 
      'id': 'buildings', 
      'type': 'fill', 
      'source': 'osm', 
      'source-layer': 'buildings' 
      }] 
     } 

     // init the map 
     this.map = new mapboxgl.Map({ 
     container: 'map', 
     style: simple, 
     minzoom: 1.3, 
     bearingSnap: 15, 
     hash: true, // shows coordinates and zoom in URL widget 
     center: [-74.0073, 40.7124], // Manhattan 
     zoom: 16, 
     attributionControl: true, 
     interactive: true, 
     scrollZoom: true, 
     dragRotate: true, 
     dragPan: true, 
     doubleClickZoom: true, 
     pitch: 60 
     }) 

     this.map.addControl(new mapboxgl.Navigation()) 
     this.map.addControl(new mapboxgl.Geolocate({position: 'top-left'})) 
     this.map.addControl(new mapboxgl.Attribution({position: 'bottom-right'})) 
     this.map.addControl(new mapboxgl.Scale({ 
     position: 'bottom-left', 
     maxWidth: 80, 
     unit: 'imperial' 
     })) 
    } 
    } 
} 
</script> 

<style> 

#map { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
} 

</style> 

Любая идея, почему все обработчики не работают? Я могу увеличить и уменьшить масштаб с помощью виджета. Такая же инициализация карты вне компонента: все обработчики работают так, как должны.

Answer 1

Анализ вашего репо. У вас есть дополнительный элемент #map DOM на вашем index.html, который абсолютно позиционируется поверх пользовательского интерфейса. Все события касания/щелчка захватываются этим элементом DOM, и они не достигают фактической карты. Создал PR, чтобы удалить дополнительную разметку.