如何解决当我尝试添加圈子时,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='&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='© <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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。