हैंडलर (माउस, स्पर्श, स्क्रॉल) MapBox-जीएल-js नक्शे पर एक Vuejs एकल फाइल घटक में काम नहीं करते

वोट
1

मैं एक Vuejs एकल फाइल घटक है जो नक्शा ठीक से पता चलता है: 2016/09/26

लेकिन (डिफ़ॉल्ट) संचालकों से कोई कार्य नहीं है, यह भी उन्हें initialisation पर स्पष्ट करने के बाद नहीं।

इस एकल फाइल घटक है:

<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> 

किसी भी विचार क्यों सभी संचालकों से काम नहीं करते? मैं में और विजेट के साथ बाहर ज़ूम कर सकते हैं। एक ही नक्शे initialisation घटक के बाहर: सभी संचालकों चाहिए के रूप में काम करता है।

26/09/2016 को 09:47
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
2

अपने रेपो का विश्लेषण किया। आप अपने index.html जो UI के शीर्ष पर पूर्ण स्थिति में है पर एक अतिरिक्त #map डोम तत्व है। सभी स्पर्श / क्लिक घटनाओं इस डोम तत्व द्वारा कब्जा कर लिया जाता है और वे वास्तविक मानचित्र समाप्त न हो। अतिरिक्त मार्कअप दूर करने के लिए एक जनसंपर्क बनाया गया।

26/09/2016 को 10:35
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more