Question

我正在尝试在屏幕上渲染一个简单的Leaflet-React地图。

但是图块都被弄乱了，或者没有渲染。看一下屏幕截图：

我尝试使用默认的OpenStreetMaps URL和MapBox URL，但是两者给出的结果相同，所以我认为这不是平铺服务器问题。虽然我可能是错的。

这是我的代码：

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {Map, TileLayer, Marker, Popup} from 'react-leaflet'

class FieldMap extends Component {
    state = {
        lat: 51.505,
        lng: -0.09,
        zoom: 1,
        zoomOffset: 1
    }

    render() {
        const position = [this.state.lat, this.state.lng]
        return (
            <div style={{
                paddingBottom: "5%",
                height: "200px",
                width: "200px"
            }}>
                <Map style={{
                paddingBottom: "5%",
                height: "200px",
                width: "200px"}} center={position} zoom={this.state.zoom} zoomOffset={this.zoomOffset}>
                    <TileLayer
                        attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                        url="https://api.mapbox.com/styles/v1/rustyraptor/cjkbednp4buod2rnwog2xrdtb/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicnVzdHlyYXB0b3IiLCJhIjoiY2prOXdtZ2E5MjN3ODNxbWVsM3NyNWlsZCJ9.AVHo6o9Z68w1c2lsBXuGDg"/>
                    <Marker position={position}>
                        <Popup>
                            A pretty CSS3 popup.
                            <br/>
                            Easily customizable.
                        </Popup>
                    </Marker>
                </Map>
            </div>
        )
    }
}

这是我的HTML文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <title>AgrowView</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->

</head>
<body>
    <div id="app"></div>

    <script src="bundle.js"></script>
</body>
</html>

您还可以在我的github存储库上查看整个项目。 https://github.com/RustyRaptor/AgrowView

Answer 1

我发现了问题。事实证明，我在HTML中丢失了leaflet.css文件。

您可以按照此处的“准备页面”部分进行添加。 https://leafletjs.com/examples/quick-start/

单张反应地图渲染图块未就位和空图块

1 个答案: