Как вызвать fitBounds и getBounds в реагирующем листочке?

Question

Я не могу понять, как вызвать fitBounds () на карте Leaflet.

По сути, я пытаюсь отобразить несколько маркеров на карте и соответствующим образом настроить вид (увеличить, уменьшить, летать к, et c.). Я также видел пример Как вы вызываете fitBounds () при использовании leaflet-реагировать? , и я пытался реализовать, но это не сработало. Вот мой код, который я попробовал.

Answer 1

В вашем коде есть несколько ошибок:

1. Вы не закрываете toggleHiddden1 с }. Более того, вы называете это как toggleHiddden в компоненте. Вы должны использовать одно имя для метода.

2. экземпляр карты получен из
   let mapInst = this.mapRef.current.leafletElement;

   , а не из let mapInst = this.refs.map.leafletElement;

   Затем вы можете позвонить fitBounds()

3. Ссылка в листе карты реакции должна быть ref={this.mapRef}, а не ref="map"

4. Поместите ключ, когда вы зацикливаетесь на маркерах.

Просто использовал URL-адрес тайлов карты openstreet, чтобы иметь возможность продемонстрировать демо.

Редактировать Чтобы использовать одновременно fitBounds и getBounds для маркера, вам нужно обернуть маркеры l oop с помощью FeatureGroup и дать ему ссылку, а затем сделать

let mapInst = this.mapRef.current.leafletElement;
const group = this.groupRef.current.leafletElement; //get native featureGroup instance
mapInst.fitBounds(group.getBounds());

внутри вашего componentDidMount

и тогда вы получите желаемый результат.

Демо