एक Vue.js एकल फाइल घटक में MapBox-जीएल (कैसर-फ्रेमवर्क)

वोट
1

मैं एक कैसर फ्रेमवर्क (Vue) एकल फाइल घटक के भीतर लागू करने के लिए एक MapBox-जीएल-js मानचित्र चाहते हैं, लेकिन मैं यह काम नहीं कर मिलता है। मैं Vue साथ GOOGLEMAPS पर कुछ कोड, और प्रतिक्रिया के साथ MapBox पर कुछ सामान मिला है, और उस से एक साथ यह खींचने की कोशिश। नीचे नक्शा initialisation मानकों के साथ मैं (mapzen टाइल्स के साथ) index.html में ठीक दिखा नक्शा मिलता है, लेकिन यह घटक में चाहते हैं कर सकते हैं।

मैं इस [पालन करने की कोशिश https://laracasts.com/discuss/channels/vue/google-maps-and-vue-js](link : यूआरएल) और फिर MapBox के लिए इसे समायोजित proj / src / घटकों / maplayout.vue :

<template>
    <quasar-layout>
      <h3>Map</h3>
      <div id='map'></div>
    </quasar-layout>
  </template>

  <script>
  import mapboxgl from '../app'

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

        // initialize the map
        this.map = new mapboxgl.Map({
          container: 'map',
          style: simple,
          center: [-1.83, -78.183],
          zoom: 5.5
        })
      }
    }
  }
  </script>

  <style>
  </style>

वैसे, webpack साथ MapBox के लिए आप कुछ लोडर की जरूरत देखें: [ https://mikewilliamson.wordpress.com/2016/02/24/using-mapbox-gl-and-webpack-together/](link यूआरएल) लेकिन के रूप में मैं (Vue के बिना) से पहले Webpack के साथ काम करने MapBox मिला है, मुझे लगता है कि मुझे लगता है कि ठीक है। असल में मैं ब्राउज़र कंसोल में किसी भी त्रुटि (लेकिन स्पष्ट रूप से कोई नक्शा प्रदर्शित होता है) नहीं मिलता है।

app.js फ़ाइल में मैं सुझाव के साथ सौदा करने के लिए कैसे (शायद आवश्यक नहीं के रूप में GoogleMaps एक कॉलबैक की जरूरत है, ?! बारे में MapBox / mapzen पता नहीं) पता नहीं है:

var App = window.App = new Vue ({
//code
})

कैसर प्रारंभ में के रूप में इस तरह किया जाता है:

Quasar.start(() => {
  Router.start(Vue.extend({}), '#quasar-app')
})

कौन सा मैं वास्तव में नहीं मिलता है ...

कोई सुझाव कैसे इस काम कर पाने के लिए स्वागत कर रहे हैं!

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


4 जवाब

वोट
1

पहली बात मैंने देखा है: नक्शे में आरंभ करने से पहले डोम दस्तावेज़ में इंजेक्ट किया जाता। 'बनाया ()' विधि के बजाय 'रेडी ()' का उपयोग करें।

23/09/2016 को 18:17
का स्रोत उपयोगकर्ता

वोट
2

मैं क़रीब था। यह वास्तव में काम करता है:

<template>
  <quasar-layout>
  <h3>Map</h3>
  <div id='map'></div>
  </quasar-layout>
</template>

<script>
import mapboxgl from 'mapbox-gl'
console.dir(mapboxgl)

export default {
  data () {
    return {}
  },
  ready () {
    this.createMap()
  },
  methods: {
    createMap: function () {
      mapboxgl.accessToken = '`yourmapboxaccestokenkey`'
      var simple = {
        'version': 8,
        'sources': {
          'osm': {
            'type': 'vector',
            'tiles': ['https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-`yourmapzenapikey`']
          }
        },
        '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,
        center: [-74.0073, 40.7124], // Manhattan
        zoom: 16
      })

      this.map.addControl(new mapboxgl.Navigation())
    }
  }
}
</script>

<style>
</style>

मैं अपने Vue initialisation नहीं बदला।

25/09/2016 को 07:25
का स्रोत उपयोगकर्ता

वोट
1

कैसर Vue2 संस्करण पर आधारित है। तो तैयार विधि है कि उपयोग घुड़सवार विधि की तो बजाय मान्य नहीं है।

25/01/2017 को 02:17
का स्रोत उपयोगकर्ता

वोट
1
<template>
  <div class="hello">
    <div id='map'></div>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';

require('../node_modules/mapbox-gl/dist/mapbox-gl.css');

export default {
  name: 'HelloWorld',
  data() {
    return {
      apiKey: ` your api key `,
    };
  },
  mounted() {
    this.createMap();
  },
  methods: {
    createMap() {
      mapboxgl.accessToken = this.apiKey;
      // init the map
      this.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        minzoom: 1.3,
        center: [-74.0073, 40.7124], // Manhattan
        zoom: 16,
      });

      this.map.addControl(new mapboxgl.Navigation());
    },
  },
};
</script>

यह मदद कर सकता है, मुझे लगता है!

18/01/2018 को 11:20
का स्रोत उपयोगकर्ता

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