反应一系列位置的小叶中心

Question

Hello！我正试图根据以下阵列设置地图的中心：

[[-23.568767,-46.649907],[-23.565972,-46.650859],[-23.563703,-46.653542],[-23.616359,-46.664749],[-23.624203,-46.683369],[-23.565972,-46.650859],[-23.572424,-46.65384],[-23.610235,-46.69591],[-23.609215,-46.69753],[-23.608786,-46.697448],[-23.617262,-46.674802],[-23.620757,-46.673658],[-23.625349,-46.692239],[-23.565972,-46.650859],[-23.564909,-46.654558],[-23.642676,-46.672727],[-23.608786,-46.697448],[-23.610652,-46.686046],[-23.573285,-46.689102],[-23.609215,-46.667182],[-23.609215,-46.667182],[-23.60997,-46.667902],[-23.584718,-46.675473],[-23.584718,-46.675473],[-23.607909,-46.692784],[-23.594718,-46.635473],[-23.564552,-46.654713],[-23.573263,-46.695077],[-23.633372,-46.680053],[-23.64717,-46.727572],[-23.576715,-46.68747],[-23.609215,-46.667182],[-23.609215,-46.667182],[-23.52631,-46.616194],[-23.614064,-46.668883],[-23.608786,-46.697448],[-23.587921,-46.6767],[-23.573691,-46.643678],[-23.573691,-46.643678],[-23.627158,-46.675183],[-23.573263,-46.695077],[-23.573263,-46.695077],[-23.572269,-46.689863],[-23.573263,-46.695077],[-23.628932,-46.665837],[-23.61506,-46.659242],[-23.528071,-46.586955],[-23.595269,-46.669645],[-23.596066,-46.686917],[-23.627158,-46.675183]]

我试着用Leaflet.latLngBounds:获得边界

const bounds = L.latLngBounds(latLngs);

并得到以下错误：

传单src.js:1658 Uncaught TypeError:无法读取的属性"lat"无效的在Object.project(传单src.js:1658(在Object.latLngToPoint(传单src.js:1497(在NewClass.project.(传单src.js:3931(在NewClass_getNewPixelOrigin(传单src.js:4425(在NewClass_移动(传单src.js:4173(在NewClass_resetView(传单src.js:4135(NewClass.setView(传单src.js:3190(在NewClass.initialize(传单src.js:3132(在新的NewClass(传单src.js:300(在Map.createLeafletElement(Map.js:99(

Uncaught TypeError:无法读取未定义的属性"off"在Map.componentWillUnmount(Map.js:258(在callComponentWillUnmountWithTimer(react-dom.development.js:15784(位于HTMLUnknownElement.callCallback(react-dom.development.js:149(位于Object.invokeGuardedCallbackDev(react dom.development.js:199(在invokeGuardedCallback(react-dom.development.js:256(在safelyCallComponentWillUnmount(react-dom.development.js:15791(在commitUnmount(react-dom.development.js:16159(在commitNestedUnmounts(react-dom.development.js:16190(在unmountHostComponents(react-dom.development.js:116446(在commitDelete(react-dom.development.js:16498(

组件中出现上述错误：在地图中(由ShopMap创建(在ShopMap中(由应用程序创建(在div中(由Context.Consumer创建(在StyledComponent中(由style.div创建(在div中(由App创建(在div中(由Context.Consumer创建(在StyledComponent中(由style.div创建(在应用程序中(由AppContainer创建(在AppContainer中(由Connect(AppContainer(创建(在Connect(AppContainer(中在提供商中

未捕获错误：引发了跨原点错误。React没有访问开发中的实际错误对象。位于Object.invokeGuardedCallbackDev(react-dom.development.js:210(在invokeGuardedCallback(react-dom.development.js:256(commitRoot(react dom.development.js:1742(at completeRoot(react dom.development.js:18898(在performWorkOnRoot(react dom.development.js:1887(在performWork(react dom.development.js:18735(在performSyncWork(react dom.development.js:1709(应请求工作(react dom.development.js:18578(在scheduleWork(react-dom.development.js:18387(在scheduleRootUpdate(react-dom.development.js:19055(

然后我尝试创建一个FeatureGroup并添加基于数组的标记：

const group = new L.FeatureGroup();
positions.forEach((latitude, longitude) => {
  L.marker([latitude, longitude]).addTo(group);
});

但结果如下：

LatLngBounds {}

地图组件：

const ShopMap = ({ shops }) => {
  const positions = shops.reduce((newArray, shop) => {
    return [
      ...newArray,
      {
        latitude: shop.latitude,
        longitude: shop.longitude
      }
    ]
  }, []);
  return (
    <Map center={getLatLngBounds(positions)} zoom={15}>
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {shops &&
        shops.map(({ latitude, longitude, revenueLowerThanExpected, name }) => {
          return (
            <Marker
              key={name}
              icon={revenueLowerThanExpected ? redMarker : blueMarker}
              position={[
                latitude,
                longitude
              ]}
            />
          );
        })}
    </Map>
  );
};

有人能帮我吗？

Answer 1

Map.center属性需要latLng值，但您想要的是Map.bounds属性，该属性为：

映射要包含的矩形。它将居中，地图将尽可能放大，同时仍显示满边界

在Map.bounds值的情况下，它可以作为{lat,lng}值的数组提供，在您的情况下是

const getLatLngBounds = () => {
  return  [
    [-23.568767, -46.649907],
    [-23.565972, -46.650859],
    [-23.563703, -46.653542],
    [-23.616359, -46.664749],
    [-23.624203, -46.683369],
    ...
  ];
} 


 <Map bounds={getLatLngBounds()} >
    <TileLayer 
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/>
</Map>

有关更多详细信息，请参阅此示例。

或者作为L.latLngBounds值，这里有一个演示供您参考。