如何移除React Leaflet中MapContainer自带的缩放控件

要解决界面出现两个缩放控件的问题，只需在MapContainer组件上添加zoomControl={false}属性，关闭其自带的默认缩放控件即可，这样就只会显示你自定义的<ZoomControl/>。

修改后的代码示例：

<MapContainer center={[coord.lat, coord.lng]} zoom={10} zoomControl={false}>
  <TileLayer
    attribution='&copy;<a href="https//www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://api.maptiler.com/maps/outdoor-v2/{z}/{x}/{y}.png?key=7h6rpJcY0Ib55GV7vQkR"
  />
  {/* 保留自定义的缩放控件 */}
  <ZoomControl/>
  <RecenterAutomatically lat={coord.lat} lng={coord.lng} />
</MapContainer>

zoomControl是Leaflet原生地图实例的配置选项，React Leaflet的MapContainer会将该属性传递给底层的Leaflet地图对象，设置为false即可禁用默认的缩放控件，只保留你手动添加的自定义控件。

内容的提问来源于stack exchange，提问作者Voffka_nik