Есть ли способ сделать отзывчивым всплывающее окно листовки, используя библиотеку реагировать листовки? - PullRequest
Новая
       50

Есть ли способ сделать отзывчивым всплывающее окно листовки, используя библиотеку реагировать листовки?

0 голосов
/ 30 марта 2020

Я исследовал и знаю, листовка js имеет плагин https://github.com/yafred/leaflet-responsive-popup, но мне нужен обходной путь для библиотеки, которую я использую реаги- Лифлет .

Реактив-листовка имеет множество сторонних плагинов, но я не вижу ничего, что бы сработало для меня. Если кто-то знает, как или сделал что-то подобное, было бы здорово, если бы вы могли поделиться этим. Мне тяжело с этим.

Спасибо.

1 Ответ

0 голосов
/ 30 марта 2020

Установите библиотеку, импортируйте js, css получите ссылку на карту, а затем визуализируйте маркер: 

import R from "leaflet-responsive-popup";
import "leaflet-responsive-popup/leaflet.responsive.popup.css";
...
  const position = [51.505, -0.09];
  const mapRef = useRef();

  const icon = L.icon({
    iconUrl: "https://unpkg.com/leaflet@1.6/dist/images/marker-icon.png",
    shadowUrl: "https://unpkg.com/leaflet@1.5.0/dist/images/marker-shadow.png"
  });

  useEffect(() => {
    const map = mapRef.current.leafletElement;
    const marker = L.marker([51.5, -0.09], { icon });
    const popup = R.responsivePopup({
      hasTip: true,
      autoPan: true,
      offset: [15, 20]
    }).setContent("A pretty CSS3 responsive popup.<br> Easily customizable.");

    marker.addTo(map).bindPopup(popup);
  }, []);

  return (
    <Map center={position} ref={mapRef} zoom={13} style={{ height: "100vh" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
    </Map>
  );

Редактировать Чтобы плагин был независимым во внешней оболочке Компонент, у вас может быть файл-обертка ResponsivePopup: 

const ResponsivePopup = () => {
  const { map } = useLeaflet();
  console.log(map);

  useEffect(() => {
    const marker = L.marker([51.5, -0.09], { icon });
    const popup = R.responsivePopup({
      hasTip: true,
      autoPan: true,
      offset: [15, 20]
    }).setContent("A pretty CSS3 responsive popup.<br> Easily customizable.");

    marker.addTo(map).bindPopup(popup);
  }, []);
  return null;
};

, в котором на этот раз вы получите ссылку на карту, используя хук useLeaflet, предоставляемый библиотекой Reaction-leaflet, и затем вы будете действовать аналогично первому решению. На этот раз ваша карта или приложение станут такими: 

 <Map center={position} zoom={13} style={{ height: "100vh" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      // here use your custom wrapper for responsive popup
      <ResponsivePopup />
    </Map>

Демо

...