5

我想在 Quasar Framework (Vue) 单文件组件中实现 Mapbox-gl-js 地图，但我没有让它工作。我在 Googlemaps 上用 Vue 找到了一些代码，在 Mapbox 上用 React 找到了一些东西，并尝试将它们整合在一起。使用下面的地图初始化参数，我可以让地图在 index.html 中显示良好（使用 mapzen 瓷砖），但希望它在组件中。

我尝试遵循这个 [ https://laracasts.com/discuss/channels/vue/google-maps-and-vue-js](link url) 然后为 Mapbox 调整它： proj/src/components/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 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')
})

我真的不明白...

欢迎任何关于如何使这项工作的建议！

4

4 回答 4

6

我很接近。这实际上有效：

<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 初始化。

于 2016-09-25T08:25:33.510 回答
2 
<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>

我猜这可能会有所帮助！

于 2018-01-18T13:20:11.883 回答
1

我注意到的第一件事：您在将 DOM 注入文档之前初始化地图。而不是 'created()' 方法使用 'ready()'。

于 2016-09-23T19:17:57.163 回答
1

Quasar 基于 Vue2 版本。因此，不推荐使用 ready 方法，因此使用安装的方法代替了该方法。

于 2017-01-25T04:17:59.300 回答