API v3 React - как рассчитать зум для маркеров так, чтобы все маркеры было видно?

Question

Есть такой простой компонент:

<div className={className}>
  <YMap location={mapLocation}>
    <YMapListener onClick={handleMapClick} />
    <YMapMarker coordinates={localCoordinates} draggable onDragEnd={onDragEnd}>
      <div className="w-4 h-4 bg-black rounded-full" />
    </YMapMarker>
    <YMapCollection />
    {connectedZoneCoordinates && (
      <YMapFeature
        geometry={{
          type: "LineString",
          coordinates: [coordinates, connectedZoneCoordinates],
        }}
        style={{
          stroke: [{ width: 1, color: "#000" }],
        }}
      />
    )}
    {connectedZoneCoordinates && (
      <YMapMarker coordinates={connectedZoneCoordinates}>
        <div className="bg-white rounded-full w-10 h-10 flex-center p-[2px]">
          <div className="rounded-full border-4 flex-center border-[#4C4C4C]">
            <DeleteForever />
          </div>
        </div>
      </YMapMarker>
    )}
  </YMap>
</div>

Сейчас mapLocation передает в качестве zoom статичное значение по умолчанию. На карте может быть один маркер, а может быть два. Если будет один - он будет виден и в нем будет отцентрирован. Если будет два - второй не будет видно. Как, используя React обертку api v3 рассчитать центр и зум расстояния между двумя маркерами, чтобы оба из них были видны на экране?

Answer 1

Нужно передать вместо координат и зума в YMap bounds с координатами границ карты. Карта сама рассчитает зум и установит границы между маркерами

Answer 2

Вы можете использовать метод map.setLocation(), передавая в него объект bounds — участок карты для отображения.

Чтобы определить область, в которую попадут все метки, нужно самостоятельно вычислять положение меток и формировать нужный bounds. Также получить bounds можно при помощи turf.js.

БЛОГ НА HUSL

API v3 React - как рассчитать зум для маркеров так, чтобы все маркеры было видно?

Ответы (2 шт):