1

Не совсем понимаю как подключать API yandex map к react, в документации https://yandex.ru/dev/maps/jsapi/doc/3.0/quick-start/index.html#load-api указано что через html это надо делать, но как же подключить в самом react, пробовал через index.html, не вышло

1

2 ответа 2

1

Для интеграции API Yandex Maps в проект на React удобно воспользоваться сторонней библиотекой, которая упростит процесс. Одним из таких инструментов является React Yandex Maps. Вот пример того, как можно использовать эту библиотеку:

Установи библиотеку с помощью npm:

npm install react-yandex-maps

Импортируй компоненты из библиотеки в файле React-компонента:

import { YMaps, Map, Placemark } from 'react-yandex-maps';

Используй компоненты в JSX:

 function MyMap() {
  return (
    <YMaps>
      <Map defaultState={{ center: [55.751574, 37.573856], zoom: 9 }}>
        <Placemark geometry={[55.751574, 37.573856]} />
      </Map>
    </YMaps>
  );
}

export default MyMap;

Замени значения center и geometry на координаты выбранного местоположения.

1
  • Кажется, это для второй версии, а не для третьей?
    – Qwertiy
    25 дек 2023 в 20:55
1

Для 3-й версии есть модуль reactify, из него можно получить компоненты примерно так:

import React, {useEffect, useMemo} from "react";
import {features, LOCATION} from './helpers'

function Map() {
  const [data, setData] = useState(); 
  const {
    YMap,
    // ...other components
  } = useMemo(() => {
    if (data?.reactify) {
      return reactify.module(data.ymap);
    }
  }, [data]);

  useEffect(() => {
    const script = document.createElement('script');
    document.body.appendChild(script);
    script.type = "text/javascript";
    script.src = `https://api-maps.yandex.ru/v3/?apikey=${key}&lang=${lang}`;
    script.onload = async () => {
      const ymaps = window.ymaps3
      await ymaps.ready;
      const ymaps3Reactify = await ymaps.import('@yandex/ymaps3-reactify');
      const reactify = ymaps3Reactify.reactify.bindTo(React, ReactDOM);

      setData({
        reactify,
        ymaps
      });
      /*
      and other logic which is not connected with rendering
      to load ymap modules like YMapDefaultMarker
      */
    }
  }, [])
  
  if (!YMap) {
    return null;
  }

  return (
    <YMap location={location}>
      <YMapDefaultSchemeLayer/>
      <YMapDefaultFeaturesLayer/>
      <YMapDefaultMarker
        coordinates={LOCATION.coordinates}
      />
    </YMap>
  );
}

export default Map;

Однако, можно и из библиотеки ymap3-components достать компоненты через import:

import React from "react";
import {
  YMap,
  YMapDefaultSchemeLayer,
  YMapDefaultFeaturesLayer
  // ...other components
} from "ymapv3-components";
import { features, LOCATION } from './helpers'

function Map() {
  return (
    <YMapComponentsProvider apiKey={process.env.REACT_APP_YMAP_KEY}>
      <YMap location={location}>
        <YMapDefaultSchemeLayer />
        <YMapDefaultFeaturesLayer />
        <YMapDefaultMarker
          coordinates={LOCATION.coordinates}
        />
      </YMap>
    </YMapComponentsProvider>
  );
}

export default Map;

Также учитывайте, что для работы с 3-м api нужно выполнить следующие шаги:

  1. Получить ключ для map js api
  2. Установить домен, где будет работать сайт с картой
  3. Для разработки удобно поменять /etc/hosts, потому что карта будет запускаться только на сайте, где referer такой же, как установленный домен

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.