Question

地狱！我正在尝试根据以下数组设置地图的中心：

[[-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);

并出现以下错误：

leaflet-src.js：1658未捕获的TypeError：无法读取的属性“ lat”   空值       在Object.project（leaflet-src.js：1658）       在Object.latLngToPoint（leaflet-src.js：1497）       在NewClass.project（leaflet-src.js：3931）       在NewClass._getNewPixelOrigin（leaflet-src.js：4425）       在NewClass._move（leaflet-src.js：4173）       在NewClass._resetView（leaflet-src.js：4135）       在NewClass.setView（leaflet-src.js：3190）       在NewClass.initialize（leaflet-src.js：3132）       在新的NewClass（leaflet-src.js：300）       在Map.createLeafletElement（Map.js：99）

未捕获的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）       在safeCallComponentWillUnmount（react-dom.development.js：15791）       在commitUnmount（react-dom.development.js：16159）       在commitNestedUnmounts（react-dom.development.js：16190）       在unmountHostComponents（react-dom.development.js：16446）       在commitDeletion（react-dom.development.js：16498）

上述错误发生在组件中：       在地图上（由ShopMap创建）       在ShopMap中（由App创建）       在div中（由Context.Consumer创建）       在StyledComponent中（由styled.div创建）       在div中（由App创建）       在div中（由Context.Consumer创建）       在StyledComponent中（由styled.div创建）       在App中（由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：17442）       在completeRoot（react-dom.development.js：18898）       在performWorkOnRoot（react-dom.development.js：18827）       在performWork（react-dom.development.js：18735）       在performSyncWork（react-dom.development.js：18709）       在requestWork（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 property，它是：

地图要包含的矩形。它将居中，并且地图将在显示完整边界的同时尽可能地放大

对于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='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/> </Map>

有关更多详细信息，请参见this example。

或者作为L.latLngBounds的值，这里是a demo供您参考。

一组位置的React-leaflet中心

1 个答案: