javascript - 当我单击一个标记时，我需要放大两个级别才能看到位置

Question

• 我正在使用标记集群组。
• 使用它我可以显示两个标记。
• 当您单击红色的第二个数字时，您将看到两个标记。
• 之后，当我单击一个标记时，我需要放大两个级别才能看到该位置
• 我为此写了一个标记单击，并在其中添加了缩放并尝试使用 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 });

};

标签： javascripthtmlreactjsleaflet

Answer 1

您在MarkerClick()中使用的缩放值低于当前缩放值 ( zoom = 8 )。因此，您没有得到适当的缩放。使用Zoom = 14 或 16和一组不同的坐标而不是 [20,6]。

例如：

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