当我尝试添加圈子时，react-leaflet我的地图是白色的

问题描述

你好，我尝试在我的反应传单地图上添加圆圈，当我这样做时，地图变成白色，我只看到圆圈，希望有人能帮助我解决这个问题，我尝试了很多事情，但是这里没有任何作用是代码=>

import 'leaflet/dist/leaflet.css'
import { Map,TileLayer,Marker,Tooltip,Popup,Circle } from 'react-leaflet';
import './map.scss';
import 'leaflet/dist/leaflet.css';


class MapComp extends React.Component {
    state = {
        lat: 55.702868,lng: 37.530865,zoom: 3
    };

    render() {
        var center = [this.state.lat,this.state.lng];

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

                <Circle key='1' center={[this.state.lat,this.state.lng]} radius={20} />);
            </Map>
        );
    }
}

export default MapComp```

解决方法

这是一个有效的代码段。

.leaflet-container {
  height: 100vh;
  width: 100vw;
}

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/react-leaflet/dist/react-leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { Map,TileLayer,Circle } = window.ReactLeaflet

class MapComp extends React.Component {
  state = {
    lat: 55.702868,lng: 37.530865,zoom: 10
  };

  render() {
    var center = [this.state.lat,this.state.lng];

    return (
      <Map zoom={this.state.zoom} center={center}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Circle key="1" center={center} radius={2000} />
      </Map>
    );
  }
}

ReactDOM.render(<MapComp />,document.getElementById('root'));
</script>

<div id="root"></div>