Для установки пользовательского маркера (пина) в библиотеке react-yandex-maps вы можете использовать компонент `Placemark`. Пример:
1. Установите библиотеку react-yandex-maps:
```bash
npm install react-yandex-maps
```
2. Импортируйте нужные компоненты:
```jsx
import React from 'react';
import { YMaps, Map, Placemark } from 'react-yandex-maps';
```
3. В функциональном компоненте создайте место для отображения карты и установки маркера:
```jsx
const MapWithPlacemark = () => {
return (
<YMaps>
<div style={{ width: '100%', height: '400px' }}>
<Map defaultState={{ center: [55.751574, 37.573856], zoom: 9 }}>
<Placemark geometry={[55.751574, 37.573856]} />
</Map>
</div>
</YMaps>
);
};
export default MapWithPlacemark;
```
В коде выше `Map` - это компонент отображения карты, а `Placemark` - компонент установки маркера. `defaultState` задает начальные параметры карты, а `geometry` в `Placemark` задает координаты маркера.
Чтобы рассчитать значение для `iconImageOffset` так, чтобы определить координаты места, куда попадает острие пина (середина нижней прямой ширины), вы можете использовать CSS-свойства `width` и `height` для указания размеров маркера и `transform` для смещения относительно его центра. Пример:
```jsx
const MapWithCustomPlacemark = () => {
return (
<YMaps>
<div style={{ width: '100%', height: '400px' }}>
<Map defaultState={{ center: [55.751574, 37.573856], zoom: 9 }}>
<Placemark
geometry={[55.751574, 37.573856]}
options={{
iconLayout: 'default#image',
iconImageHref: '/path/to/custom-marker.png',
iconImageSize: [32, 32],
iconImageOffset: [-16, -32], // смещение от центра (x, y)
}}
/>
</Map>
</div>
</YMaps>
);
};
export default MapWithCustomPlacemark;
```
В коде выше `iconImageHref` указывает путь к пользовательскому изображению маркера, а `iconImageSize` - его размеры.
Надеюсь, это поможет вам установить пользовательский маркер и рассчитать значение для `iconImageOffset` в библиотеке react-yandex-maps.