如何解决Vue2-leaftlet贴图无法渲染图块
出现如下所示的组件,但图块并不全部存在,并且缩放会产生完全不同的坐标。地图组件似乎完全不对齐。
<template>
<div class="basic-example">
<l-map style="height: 100%; overflow: hidden;" :zoom="10" :center="[47.334852,-1.509485]">
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
</l-map>
</div>
</template>
<script>
import "leaflet/dist/leaflet.css";
import { LMap,LTileLayer } from "vue2-leaflet";
export default {
components: {
LMap,LTileLayer,},data() {
return {
}
}
};
</script>
<style>
.basic-example {
width: 100%;
height: 100%;
}
</style>
这会产生一个看起来像
的地图主文件同样看起来很无聊:
import '@fortawesome/fontawesome-free/css/all.min.css'
import 'bootstrap-css-only/css/bootstrap.min.css'
import 'mdbvue/lib/mdbvue.css'
import Vue from 'vue'
import VueRouter from 'vue-router';
import VCalendar from 'v-calendar';
import App from './App.vue'
import VMdDaterangePicker from "v-md-date-range-picker";
import router from './router'
import store from './store'
Vue.config.productionTip = false
Vue.use(VMdDaterangePicker);
Vue.use(VueRouter)
// Use v-calendar & v-date-picker components
Vue.use(VCalendar,{});
new Vue({
el: '#app',data(){
return {
}
},router,store,render: function(createElement) {
return createElement(App);
}
});
任何帮助表示赞赏
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。