Блог

• Я использую группу кластеров маркеров.
• используя это, я могу показать два маркера.
• когда вы нажмете номер два, который выделен красным цветом, вы увидите два маркера.
• после этого, когда я нажимаю на один маркер, мне нужно увеличить масштаб на два уровня, чтобы увидеть местоположение
• Для этого я написал щелчок по маркеру и добавил масштабирование, а также попытался использовать fitbounds, но это не увеличило масштаб.
• тогда мы использовали mapcenter, и это тоже не сработало `
• можете ли вы сказать мне, как это исправить.
• предоставляю свой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/20756jrz8p

 MarkerClick = e => {
console.log("e----->", e);
this.setState({
  viewport: { center: [20, 6], zoom: 7 }
});
//this.refs.mymap.leafletElement.setZoom(8);
//let bounds = this.refs.mymap.leafletElement.fitBounds();
//console.log("bounds----->", bounds);

console.log(
  "after setting state zoomlevel bounds showCard--->",
  this.state.zoom
);

// this.setState({ zoom: 18 });

//this.setState({ zoomLevel: 7 });
  

};

Значение масштабирования, которое вы использовали в MarkerClick (), меньше текущего значения масштабирования (zoom = 8). Следовательно, вы не получаете надлежащего масштабирования. Используйте Zoom = 14 или 16 и другой набор координат вместо [20,6].

Например:

 MarkerClick = e => {
...
    this.setState({
          viewport: { center: [43.39528702235596, 6.294845731267186], zoom: 16 }
    });
...
}