Question

我的 create-react-app 使用 react-leaflet 制作具有 OSM 磁贴的 Map 组件。当我在本地运行代码时，通过 npm start 或通过 npm run build，地图可以正确显示；服务构建。但是，当我将构建版本部署到 Netlify 或 bitbucket.io 时，地图为灰色。

地图创建如下：

<Map center={position}
     zoom={13}
     ref={this.mapRef}>
  <TileLayer
     attribution='&amp;copy <a href="http:osm.org/copyright">OpenStreetMap</a> contributors'
     url="https:{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  {........}
</Map>

我首先尝试通过对Map元素进行 .invalidateSize（）来解决此问题，但这没有帮助。

然后使用 Chrome开发者工具，我注意到在本地运行代码时URL是正确的：

https://b.tile.openstreetmap.org/13/4663/2370.png

但在部署时出错：

https://xyz.bitbucket.io/b.tile.openstreetmap.org/13/4663/2370.png

我该如何解决？

小叶地图图块不会在已部署的代码中加载

0 个答案: