vue中mapbox地图显示一半的问题及解决方法
解决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地图显示一半内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Ant Design moment对象和字符串之间的相互转化教程
这篇文章主要介绍了Ant Design moment对象和字符串之间的相互转化教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10vue实现对highlight-current-row方式整行选中后修改默认背景颜色
这篇文章主要介绍了vue实现对highlight-current-row方式整行选中后修改默认背景颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11详解vue之自行实现派发与广播(dispatch与broadcast)
这篇文章主要介绍了详解vue之自行实现派发与广播(dispatch与broadcast),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-01-01vuejs+element UI table表格中实现禁用部分复选框的方法
今天小编就为大家分享一篇vuejs+element UI table表格中实现禁用部分复选框的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09Vue使用js-audio-recorder实现录制,播放与下载音频功能
这篇文章主要为大家详细介绍了Vue如何使用js-audio-recorder实现录制,播放与下载音频功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2023-12-12
最新评论