亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Mapbox 空白地圖 React-map-gl | Mapbox 空白地圖 ReactJS

Mapbox 空白地圖 React-map-gl | Mapbox 空白地圖 ReactJS

墨色風雨 2024-01-18 14:39:08
我正在使用react 17.0.1和react-map-gl ^6.0.2我有一個地圖組件。我嘗試過其他庫,問題仍然存在我已經聯系了 Mapbox 的支持人員我已經聯系了其他mapbox用戶無法解決這個問題當我執行“npm run start”時沒問題,它顯示地圖,但是當我執行“npm run build”時,它只顯示:地圖空白它拋出這個錯誤:錯誤我的代碼如下:  import React, {useState } from "react";import ReactMapGL from 'react-map-gl';const Map = () => {  const[viewport, setViewport] = useState({    width: "100%",    height: "400px",    latitude: 38.963745,    longitude: 35.243322,    zoom: 5  });     return (    <div>      <h2>Size yak?n olan yerleri ke?fedin!</h2>            <ReactMapGL                 {...viewport}              onViewportChange={setViewport}              mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}              mapStyle="mapbox://styles/mapbox/streets-v11"           />          </div>           );        }     export default Map
查看完整描述

7 回答

?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

我知道這是一個舊帖子..

據我了解,原因是 mapbox (不是react-map-gl)有一個錯誤,無法使用“npm build”正確轉換。

幸運的是,正如我在此鏈接中了解到的那樣,您不必彈出您的應用程序: https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795

我不得不npm install worker-loader

然后添加以下行。

    // had this.

    import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl';    import 'mapbox-gl/dist/mapbox-gl.css';



    // added the following 6 lines.

    import mapboxgl from 'mapbox-gl';


    // The following is required to stop "npm build" from transpiling mapbox code.

    // notice the exclamation point in the import.

    // @ts-ignore

    // eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved

    mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

由于我使用的是打字稿和 linting,我必須添加一些指令來忽略警告/錯誤,否則會阻止它編譯。


請注意,我不必安裝,mapboxgl因為react-map-gl使用它。


但是,我確實需要添加eslint-disable-next-line import/no-unresolved


并eslint-disable-next-line import/no-webpack-loader-syntax 合并在同一條線上。


我正在使用“react-map-gl”:“^6.1.17”。


查看完整回答
反對 回復 2024-01-18
?
呼如林

TA貢獻1798條經驗 獲得超3個贊

該問題是由轉譯器引起的。這是 Mapbox 正在解決的一個錯誤。請遵循此處的建議:

https://github.com/mapbox/mapbox-gl-js/issues/10173

現在它也出現在官方文檔中。

https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2


查看完整回答
反對 回復 2024-01-18
?
慕村9548890

TA貢獻1884條經驗 獲得超4個贊

埋在此處發布的幾個鏈接中的是這為我解決了問題。它修復了導致問題的 Mapbox 轉譯器錯誤。


// @ts-ignore

// eslint-disable-next-line import/no-webpack-loader-syntax

import mapboxgl from '!mapbox-gl';


查看完整回答
反對 回復 2024-01-18
?
楊__羊羊

TA貢獻1943條經驗 獲得超7個贊

僅將寬度和高度設為數字


const[viewport, setViewport] = useState({

    width: "100",

    height: "400",

    latitude: 38.963745,

    longitude: 35.243322,

    zoom: 5

});


查看完整回答
反對 回復 2024-01-18
?
四季花海

TA貢獻1811條經驗 獲得超5個贊

當嘗試部署應用程序時,首先我們運行yarn build。這似乎完成了它的工作,沒有構建錯誤。然而,當我們實際部署它時,例如為構建提供服務。我們遇到了“referenceError:y 未定義”。

將Mapbox-gl版本降級到1.13.0時。構建工作得很好。這是我們在問題解決之前必須要做的事情。

以下步驟:

  • 運行yarn install或npm install

  • 運行yarn build或npm build


查看完整回答
反對 回復 2024-01-18
?
拉莫斯之舞

TA貢獻1820條經驗 獲得超10個贊

將以下內容添加到 package.json 對我有用:


"browserslist": {

    "production": [

        ">0.2%",

        "not dead",

        "not ie 11",

        "not chrome < 51",

        "not safari < 10",

        "not android < 51"

    ],

    "development": [

        "last 1 chrome version",

        "last 1 firefox version",

        "last 1 safari version"

    ]

},


查看完整回答
反對 回復 2024-01-18
?
慕斯王

TA貢獻1864條經驗 獲得超2個贊

此問題的解決方案對我有用,無需更改瀏覽器列表:


在 Map.js 組件中:


import { workerClass } from 'mapbox-gl';

import workerLoader from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';


workerClass = workerLoader;

在 eslintrc 中:


"import/no-webpack-loader-syntax": "off",

"import/no-unresolved": "off"


查看完整回答
反對 回復 2024-01-18
  • 7 回答
  • 0 關注
  • 430 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號