Как показать Infowindow для маркеров с одинаковыми координатами? - PullRequest
Новая
       34

Как показать Infowindow для маркеров с одинаковыми координатами?

0 голосов
/ 06 мая 2019

Я столкнулся с проблемой при использовании lib-maps-google-maps.Использовал и MarkerClusterer, и Spiderfy, чтобы очень плавно показывать маркеры с одинаковыми координатами.Но это не работает должным образом.Пожалуйста, посмотрите и помогите с этой проблемой.Если у кого-то есть опыт в этой области, пожалуйста, поделитесь своим прошлым опытом со мной и другими.Спасибо. 

Marker.js

  onToggleOpen(index) {
    const { mapInfoOpenedChangeAction, opened } = this.props;
    mapInfoOpenedChangeAction(opened === index ? -1 : index);
  }

  onMarkerDblClick(ipAddress) {
    const { mapMarkerDblClickAction } = this.props;
    mapMarkerDblClickAction(ipAddress);
  }

  render() {
    const { cache, search, checkedIPs, opened } = this.props;

    this.fetchedData = search
      ? search.fetchedData
      : cache
        ? cache.fetchedData
        : [];

    return (
      checkedIPs.length !== 0 && (
        <MarkerClusterer averageCenter gridSize={50} maxZoom={15}>
          <Spiderfy fetchedData={this.fetchedData}>
            {this.fetchedData.map((location, index) => {
              return (
                <Marker
                  key={index}
                  title={location.ipAddress}
                  position={{
                    lat: location.latitude,
                    lng: location.longitude
                  }}
                  onClick={() => this.onToggleOpen(index)}
                  onDblClick={() => this.onMarkerDblClick(location.ipAddress)}
                >
                  {opened === index && (
                    <InfoWindow
                      position={{
                        lat: location.latitude,
                        lng: location.longitude
                      }}
                      onCloseClick={() => this.onToggleOpen(index)}
                    >
                      <div>
                        ...
                      </div>
                    </InfoWindow>
                  )}
                </Marker>
              );
            })}
          </Spiderfy>
        </MarkerClusterer>
      )
    );

Spiderfy.js

  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 { mapInfoOpenedChangeAction } = this.props;
    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);
        mapInfoOpenedChangeAction(-1);
      } else {
        const ipAddress = marker.getTitle();
        const index = _.findIndex(this.props.fetchedData, {
          ipAddress: ipAddress
        });
        mapInfoOpenedChangeAction(index);
      }
    });
  }

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