如何解决react-leaflet入门问题
我尝试将示例用法添加到我的网站以开始使用,displayed就是这样。有人看过这个问题吗?解决方案?
代码如下:
import React from 'react'
import { Map as LeafletMap,Marker,Popup,TileLayer } from 'react-leaflet'
export default class TestMap extends React.Component {
public render = () => {
const position: [number,number] = [51.505,-0.09]
return (
<LeafletMap center={position} zoom={13}>
<TileLayer
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<Marker position={position}>
<Popup>
A pretty CSS3 popup.
<br />
Easily customizable.
</Popup>
</Marker>
</LeafletMap>
)
}
}
解决方法
我忘记添加了
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
到index.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。