Vue2-leaflet LMap/LTileLayer 未正确渲染答案

【问题标题】：Vue2-leaflet LMap/LTileLayer not rendering correctlyVue2-leaflet LMap/LTileLayer 未正确渲染
【发布时间】：2020-10-30 11:02:16
【问题描述】：

我只是想在我当前的 Vue2 学习项目中添加一张地图。在查看了谷歌地图后，我认为 OSM 和 Leaflet 是最好的选择。但是我遇到了一个早期的障碍，地图目前只是呈现为一个蓝色方块。

这就是我的地图现在的样子。

这里是 Vue 组件。 url 和 url2 都显示相同的内容，我不确定这是访问令牌的问题，还是我为 OSM 使用了错误的 URL。

<template>
  <v-container>
    <h1>Hello</h1>
    <l-map :zoom="zoom" :center="center" style="height: 500px; width: 100%">
      <l-tile-layer :url="url" :attribution="attribution"/>
    </l-map>
  </v-container>
</template>

<script>
import { LMap, LTileLayer } from 'vue2-leaflet';

export default {
  data() {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      url2: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      // eslint-disable-line
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      center: [33.8688, 151.2093],
      zoom: 12,
    };
  },
  components: {
    LMap,
    LTileLayer,
  },
};
</script>

【问题讨论】：

标签： vue.js vuejs2 leaflet openstreetmap vue2leaflet

【解决方案1】：

在我看来，这是预期的行为，因为您指定的坐标 ([33.8688, 151.2093]) 指向日本以外的太平洋：

https://www.openstreetmap.org/#map=4/33.60/151.31

而且由于您指定了较高的初始缩放 (12)，因此四处平移仍会获得蓝色海洋图块。

【讨论】：