Могу ли я использовать OverlappingMarkerSpiderfier с картами react-google?

Я работаю над проектом, в котором используется react-google-maps (https://github.com/tomchentw/react-google-maps).

Работает хорошо, но мы наткнулись на проблему с перекрывающимися маркерами. Идеальным решением для нашего случая было бы использование этого плагина: https://github.com/jawj/OverlappingMarkerSpiderfier.

Есть ли способ использовать его с react-google-maps?


reactjs google-maps javascript react-google-maps markerspiderfier
person Piotr Szlagura    schedule 06.02.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Как интегрировать OverlappingMarkerSpiderfier plugin в react-google-maps

1)установить npm-overlapping-marker-spiderfier пакет: npm i npm-overlapping-marker-spiderfier

2) после установки следующий компонент демонстрирует, как создать экземпляр класса OverlappingMarkerSpiderfier и передать маркеры:

import React from "react";
import PropTypes from "prop-types";
import { MAP, MARKER } from "react-google-maps/lib/constants";


class Spiderfy extends React.Component {
  static contextTypes = {
    [MAP]: PropTypes.object
  };

  constructor(props, context) {
    super(props, context);
    const oms = require(`npm-overlapping-marker-spiderfier/lib/oms.min`)
    this.oms = new oms.OverlappingMarkerSpiderfier(this.context[MAP], {});
    this.markerNodeMounted = this.markerNodeMounted.bind(this);
  }

  markerNodeMounted(ref) {
    const marker = ref.state[MARKER];
    this.oms.addMarker(marker); 
    window.google.maps.event.addListener(marker, "spider_click", (e) => {
      if (this.props.onSpiderClick) this.props.onSpiderClick(e);
    });
  }

  render() {
    return React.Children.map(this.props.children, child =>
      React.cloneElement(child, { ref: this.markerNodeMounted })
    );
  }
}

Использование

<GoogleMap
  defaultZoom={zoom}
  defaultCenter={{
    lat: center.lat,
    lng: center.lng
  }}
>
  <Spiderfy>
    <Marker
      position={{
        lat: center.lat,
        lng: center.lng
      }}
    />
    <Marker
      position={{ lat: -37.9716929, lng: 144.772958 }}
      title="Melbourne"
    />
    <Marker
      position={{ lat: -38.132245, lng: 144.2994245 }}
      title="Geelong"
    />
    <Marker
      position={{ lat: -38.2277575, lng: 145.0447435 }}
      title="Mornington"
    />
  </Spiderfy>
</GoogleMap>

Вот демо для справки

person Vadim Gremyachev    schedule 09.04.2019
comment
Большое спасибо за ответ! Завтра проверю :) - person Piotr Szlagura; 10.04.2019
comment
Спасибо за это. Будет ли это работать с пользовательскими компонентами реакции вместо стандартных маркеров карты Google? - person ArcadeRenegade; 07.06.2019
comment
Может потребоваться некоторая корректировка, в предоставленной реализации есть зависимость от собственного объекта маркера, который передается через контекст. - person Vadim Gremyachev; 07.06.2019
comment
Демонстрация кажется сломанной (не только ключ с истекшим сроком действия) - маркеры не имеют значка паука, и приложение вылетает при нажатии на значок. У кого-нибудь есть рабочий пример кода react-google-maps/react, которым они могут поделиться? - person Becks104; 05.10.2020