处理程序（鼠标、触摸、滚动）在 Vuejs 单文件组件中的 Mapbox-gl-js 地图上不起作用

Question

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

但是 none 的（默认）处理程序可以工作，在初始化时将它们显式化后也不会工作。

这是单个文件组件：

<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

分析了你的回购协议。您的 index.html 上有一个额外的 #map DOM 元素，它绝对位于 UI 之上。所有 touch/click 事件都被这个 DOM 元素捕获，它们不会到达实际地图。创建了一个 PR 以删除额外的标记。

处理程序（鼠标、触摸、滚动）在 Vuejs 单文件组件中的 Mapbox-gl-js 地图上不起作用

Handlers (mouse, touch, scroll) do not work on Mapbox-gl-js map in a Vuejs single file component

javascript

vue.js

mapbox-gl-js