小编Rus*_*tor的帖子

我正在尝试将一个简单的 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 …