無法讓控件顯示在 react leaflet mapContainer 上

Question

使用 react leaflet 將 map 組件添加到我的應用程序。map 顯示正常，以及 geoJSON。 彈出窗口將 go 在我想要但不可見的位置。

最大的問題是我在每個在線示例中看到的縮放控件（+- 按鈕）都沒有顯示。 Map 組件

這是它的代碼：

import React, { PureComponent, Component} from 'react'
import './Map.css'
import 'leaflet/dist/leaflet.css'
import { MapContainer, TileLayer, Marker, GeoJSON, ZoomControl, Popup} from 'react-leaflet'


class MapView extends PureComponent {
  constructor(props) {
    super(props);
  }
  render () {
    var position = [40.8, -74.15]

return (
  
    <MapContainer
      className='Map-Container'
      center={position}
      zoom={14}
      minZoom={10}
      maxZoom={16}
    >
      <ZoomControl position="topleft" />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
      <TileLayer
        className='TileLayer'
        url='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
        attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
      />
    </MapContainer>
)

} }

導出默認 MapView

Answer 1

我找到了一個視頻，展示了如何設置縮放並修復它。 https://egghead.io/lessons/react-change-the-react-leaflet-map-zoomcontrol-location-and-icons如果我能為你找到合適的解決方案，我也會檢查codesandbox :)

這是在計算器上。

帶有條件的 React-Leaflet 自定義標記