Mapbox-gl в одном файле Vue.js (Quasar-Framework)

Question

Я хотел бы реализовать карту Mapbox-gl-js в одном компоненте Quasar Framework (Vue), но я не получаю его работу. Я нашел код на Googlemaps с Vue и некоторые вещи на Mapbox с React, и попытайтесь вытащить его из этого. С параметрами инициализации ниже карты я могу получить карту, показывающую штраф в index.html (с плитами mapzen), но хочу его в компоненте.

Я стараюсь следовать этому [https://laracasts.com/discuss/channels/vue/google-maps-and-vue-js](link URL), а затем настроить его для 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> 

Кстати, для MapBox с WebPack вам нужно некоторые загрузчики, см .: [https://mikewilliamson.wordpress.com/2016/02/24/using-mapbox-gl-and-webpack-together/](link url) Но поскольку я получил Mapbox, работающий с Webpack раньше (без vue), я думаю, что у меня все в порядке. На самом деле я не получаю никаких ошибок в консоли браузера (но, очевидно, карта не отображается).

В app.js файл я не знаю, как справиться с предложенным (возможно, нет необходимости, поскольку GoogleMaps нужен обратный вызов, не знаю о MapBox/mapzen ?!):

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

Как при инициализации Quasar делается так:

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

Что я на самом деле не получить ...

Любые предложения, как получить эту работу приветствуются!

Answer 1

Я был близок. Это действительно работает:

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

Answer 2

Первое, что я заметил: вы инициализируете карту перед тем, как DOM вводится в документ. Вместо метода «created()» используйте «ready()».

Answer 3

Quasar основан на версии Vue2. Поэтому готовый метод устарел, поэтому вместо этого используется установленный метод.

Answer 4

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

Это может помочь, я думаю!