1

我只是想在我当前的 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>
4

1 回答 1

1

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

在指定坐标缩放 4

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

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

于 2020-07-10T04:07:56.383 回答