小编Sam*_*are的帖子

空白地图图块 - 错误 410 消失(Mapbox 和 Leaflet JS)

我正在使用 Leaflet JS 和 MapBox 创建地图。我的浏览器显示如下:

带有 MapBox 的空白地图图块

地图根本不显示,我的地图图块是空白的。我在开发工具控制台中得到的错误是:

控制台中的错误消息

GET https://api.tiles.mapbox.com/v4/mapbox.streets/9/123/183.png?access_token=pk.eyJ1IjoibXl2ZXJkaWN0IiwiYSI6ImNrZmoyYmpuNDB1eHYycG16bms0aHN2ZWwifQ.w0DRp5yDUHxa2RJa0aDRlQ 410 (Gone)
Image (async)       
createTile  @   TileLayer.js:158
_addTile    @   GridLayer.js:812
_update     @   GridLayer.js:709
_setView    @   GridLayer.js:570
_resetView  @   GridLayer.js:526
 onAdd      @   GridLayer.js:162
_layerAdd   @   Layer.js:114
whenReady   @   Map.js:1465
addLayer    @   Layer.js:176
addTo       @   Layer.js:52
(anonymous) @   maps.js:16
Run Code Online (Sandbox Code Playgroud)

上面的 maps.js:16 引用了下面 maps.js 代码片段中的最后一行 .addTo(map):

let coordinates = [ 44.96, -93.2 ] 
let zoomLevel = 9
let map = L.map("college-map").setView(coordinates, zoomLevel)

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
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>, Imagery …
Run Code Online (Sandbox Code Playgroud)

html javascript client-side-scripting leaflet mapbox

15
推荐指数
2
解决办法
5671
查看次数

如何在 Nuxt 3 (Vue 3) 应用程序中将 ~/layout/default.vue 应用于 ~/error.vue?

我正在使用 Nuxt 3 和 Vue 3。我有一个默认布局的目录结构,我想将其应用于包括该error.vue页面在内的所有页面。

注意:该error.vue文件位于项目的根目录中。

我的目录结构如下:

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/
      - index.vue
      - /course/
          - [id].vue
  - /public/
  - /server/
  - /utils/
  - /app.vue
  - /error.vue
  - /nuxt.config.ts
  - package.json
  - ...
Run Code Online (Sandbox Code Playgroud)

目前,这些内容default.vue已应用于我的pages文件夹中的所有内容。

问题:如何将我的default.vue布局应用到我的布局 error.vue(位于项目根文件夹中)。

app.vue文件

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/ …
Run Code Online (Sandbox Code Playgroud)

error-handling typescript vuejs3 vue-composition-api nuxtjs3

2
推荐指数
1
解决办法
1563
查看次数