vue中mapbox地图显示一半的问题及解决方法
作者：Sheyueyu
在vue中创建mapbox地图，地图只显示一般，查看浏览器开发者工具，发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了，今天小编通过本文给大家分享详细过程，感兴趣的朋友跟随小编一起看看吧
解决vue中mapbox地图显示一半的问题
问题描述： 在vue中创建mapbox地图，地图只显示一般，查看浏览器开发者工具。发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了 。
代码修改：获取到canvas.mapboxgl-canvas,并修改其position样式就ok
修改前代码：
修改后
添加
this.map.on("load", () => {
// Wait for map to load before modifying styles
const canvas = this.$refs.mapContainer.querySelector('.mapboxgl-canvas');
canvas.style.position = 'relative';
});完整代码：
<template>
<main>
<p>Center :{{center}}</p>
<p>Zoom : {{ zoom }}</p>
<div id="map" class="map-container" ref="mapContainer">
</div>
</main>
</template>
<script>
import mapboxGl from "mapbox-gl";
export default {
name:"MapMapbox",
data(){
return {
center:[-93.1247, 44.9323],
zoom:10.5
}
},
mounted() {
mapboxGl.accessToken = "your_mapbox_token";
this.createMap();
console.log(this.map)
},
methods: {
createMap() {
this.map = new mapboxGl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v9",
minzoom: 5,
center: this.center,
zoom: this.zoom,
hash: true
});
this.map.on("load", () => {
// Wait for map to load before modifying styles
const canvas = this.$refs.mapContainer.querySelector('.mapboxgl-canvas');
canvas.style.position = 'relative';
});
this.map.on("move", () => {
this.center = this.map.getCenter();
});
this.map.on("zoom", () => {
this.zoom = this.map.getZoom();
});
}
},
beforeDestroy() {
if (this.map) {
this.map.remove();
}
}
}
</script>
<style scoped>
.map-container {
height: 500px;
width: 100%;
}
</style>到此这篇关于解决vue中mapbox地图显示一半的问题的文章就介绍到这了,更多相关vue中mapbox地图显示一半内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！