Vue2-leaftlet贴图无法渲染图块

编程问答 2022-07-24

问题描述

出现如下所示的组件，但图块并不全部存在，并且缩放会产生完全不同的坐标。地图组件似乎完全不对齐。

<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>

这会产生一个看起来像

enter image description here

的地图

主文件同样看起来很无聊：

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 (将#修改为@）

javascriptleafletvue.jsvue2leaflet