vue mapbox 地图 demo

执行以下命令:

npm install --save mapbox-gl
// cnpm install --save mapbox-gl

<template>
<div style="width: 600px;height: 200px;">
<div ref="basicMapbox" :style="mapSize" id="map"></div>
</div>
</template>
<script>
export default {
props: {
mapWidth: {
type: String
},
mapHeight: {
type: String
}
},
data () {
return {
}
},
mounted () {
this.init()
},
methods: {
// 初始化
init () {
let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
mapboxgl.accessToken = 'pk.eyJ1IjoiMTU2MDA1ODc1MzEiLCJhIjoiY2pqemo4em01YXoyaTN2bGZ0YnhyNWhrayJ9.cBK7DuuLXgb4Pu-2g_eRAQ';
let map = new mapboxgl.Map({
container: this.$refs.basicMapbox,
style: 'mapbox://styles/mapbox/streets-v10',
zoom: 13,
center: [4.899, 52.372]
})
}
},
computed: {
mapSize () {
let styleObj = {
width: this.mapWidth,
height: this.mapHeight
}
return styleObj
}
}
}
</script>
<style>
@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
</style>
上一篇:Liunx安装MQTT服务器


下一篇:解决LoggerFactory is not a Logback LoggerContext but Logback is on the classpath