mapbox如何点击居中并且展示信息弹窗

要实现点击地图上的点居中并且展示信息弹窗，可以使用 Mapbox GL JS 中的 `flyTo()` 方法和 `Popup` 类。具体实现步骤如下：

1. 创建一个 `Popup` 对象，用于展示信息窗口，可以使用以下代码：

   var popup = new mapboxgl.Popup({
       closeButton: true,
       closeOnClick: true
   });

其中，`closeButton` 表示是否显示关闭按钮，`closeOnClick` 表示是否在点击地图时自动关闭弹窗。

2. 监听地图上的点的点击事件，可以使用 `map.on('click', function(e) {...})` 来实现。

3. 在点击事件的回调函数中，获取被点击点的坐标和信息，可以使用自定义属性来存储信息，例如：

   var marker = new mapboxgl.Marker()
       .setLngLat([lng, lat])
       .setPopup(new mapboxgl.Popup().setHTML("<h1>Marker</h1><p>Marker description</p>"))
       .addTo(map);
   marker.getElement().addEventListener('click', function() {
       map.flyTo({
           center: [lng, lat],
           zoom: 15,
           bearing: 0,
           speed: 1.2,
           curve: 1,
           easing: function(t) {
               return t;
           }
       });
       popup.setLngLat([lng, lat])
           .setHTML("<h1>Marker</h1><p>Marker description</p>")
           .addTo(map);
   });

其中，`setPopup()` 方法可以设置点的弹窗内容，`getElement()` 方法可以获取点的 DOM 元素，通过 `addEventListener()` 方法添加点击事件监听，回调函数中调用 `flyTo()` 方法将地图居中，并调用 `setLngLat()` 和 `setHTML()` 方法设置弹窗的位置和内容，最后调用 `addTo()` 方法将弹窗添加到地图上。

这样就可以实现点击地图上的点居中并且展示信息弹窗的效果了。