javascript - 处理程序(鼠标、触摸、滚动)在 Vuejs 单文件组件中的 Mapbox-gl-js map 上不起作用

Question

我有一个 Vuejs 单文件组件，可以很好地显示 map :

但是没有一个(默认)处理程序可以工作，在初始化时将它们显式化之后也没有。

这是单个文件组件:

<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

分析了您的 repo 协议(protocol)。您的 index.html 上有一个额外的 #map DOM 元素，它绝对位于 UI 的顶部。所有的触摸/点击事件都被这个 DOM 元素捕获，它们不会到达实际的 map 。创建了一个 PR 以删除额外的标记。