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='&copy; <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