无法让控件显示在 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 自定义标记