如何使用react原生地图视图使两个标记居中

npm install react-map-gl

yarn add react-map-gl

import React, { useState } from 'react';
import ReactMapGL, { Marker } from 'react-map-gl';

const MapView = () => {
  const [viewport, setViewport] = useState({
    width: '100%',
    height: '400px',
    latitude: 37.7577, // 设置初始纬度
    longitude: -122.4376, // 设置初始经度
    zoom: 10, // 设置初始缩放级别
  });

  return (
    <ReactMapGL
      {...viewport}
      onViewportChange={setViewport}
      mapboxApiAccessToken={YOUR_MAPBOX_ACCESS_TOKEN}
    >
      {/* 在这里添加地图标记 */}
    </ReactMapGL>
  );
};

const MapView = () => {
  const [viewport, setViewport] = useState({
    width: '100%',
    height: '400px',
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 10,
  });

  // 假设两个标记的位置坐标为marker1和marker2
  const marker1 = {
    latitude: 37.7749,
    longitude: -122.4194,
  };
  const marker2 = {
    latitude: 37.7749,
    longitude: -122.4324,
  };

  const centerLatitude = (marker1.latitude + marker2.latitude) / 2;
  const centerLongitude = (marker1.longitude + marker2.longitude) / 2;

  return (
    <ReactMapGL
      {...viewport}
      latitude={centerLatitude}
      longitude={centerLongitude}
      onViewportChange={setViewport}
      mapboxApiAccessToken={YOUR_MAPBOX_ACCESS_TOKEN}
    >
      <Marker latitude={marker1.latitude} longitude={marker1.longitude}>
        {/* 在这里添加第一个标记的内容 */}
      </Marker>
      <Marker latitude={marker2.latitude} longitude={marker2.longitude}>
        {/* 在这里添加第二个标记的内容 */}
      </Marker>
    </ReactMapGL>
  );
};