[英]Mapbox-gl in a Vue.js single file component (Quasar-Framework)
I would like to implement a Mapbox-gl-js Map within a Quasar Framework (Vue) single file component, but I do not get it working. 我想在Quasar Framework(Vue)单文件组件中实现Mapbox-gl-js Map,但是我没有让它工作。 I found some code on Googlemaps with Vue, and some stuff on Mapbox with React, and try to pull it together from that. 我在使用Vue的Googlemaps上找到了一些代码,在Mapbox上找到了一些带有React的东西,并尝试将它从中拉出来。 With below map initialisation parameters I can get the map showing fine in the index.html (with the mapzen tiles), but want it in the component. 使用下面的地图初始化参数,我可以在index.html(使用mapzen图块)中显示正常的地图,但是希望它在组件中。
I try to follow this [ https://laracasts.com/discuss/channels/vue/google-maps-and-vue-js](link url) and then adjust it for Mapbox: proj/src/components/maplayout.vue : 我尝试按照[ 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>
By the way, for mapbox with webpack you need certain loaders, see: [ https://mikewilliamson.wordpress.com/2016/02/24/using-mapbox-gl-and-webpack-together/](link url) But as I got Mapbox working with Webpack before (without vue), I think I have that ok. 顺便说一句,对于带有webpack的mapbox,您需要某些加载器,请参阅:[ https://mikewilliamson.wordpress.com/2016/02/24/using-mapbox-gl-and-webpack-together/ ](link url)但是因为我之前让Mapbox使用Webpack(没有vue),我想我没那么好。 Actually I do not get any errors in the browser console (but obviously no map appears). 实际上我没有在浏览器控制台中出现任何错误(但显然没有地图出现)。
In the app.js file I do not know how to deal with the suggested (maybe not necessary as googlemaps needs a callback, dunno about mapbox/mapzen?!): 在app.js文件中,我不知道如何处理建议(也许没有必要,因为googlemaps需要回调,dunno关于mapbox / mapzen?!):
var App = window.App = new Vue ({
//code
})
As in Quasar initialization is done like this: 与Quasar一样,初始化完成如下:
Quasar.start(() => {
Router.start(Vue.extend({}), '#quasar-app')
})
Which I do not really get... 我真的没有...
Any suggestions how to get this working are welcome! 欢迎任何有关如何使这项工作的建议!
I was close. 我离得很近。 This actually works: 这实际上有效:
<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>
I did not change my Vue initialisation. 我没有改变我的Vue初始化。
<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>
This might help, I guess! 我想这可能会有所帮助!
First thing I noticed: You are initializing the map before DOM is injected into the document. 我注意到的第一件事是:在将DOM注入文档之前,您正在初始化地图。 Instead of 'created()' method use 'ready()'. 而不是'created()'方法使用'ready()'。
Quasar is Based on Vue2 version. Quasar基于Vue2版本。 So ready method is deprecated so instead of that use mounted method. 因此不推荐使用ready方法,而不是使用挂载方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.