如何在相同的坐标处显示标记的Infowindow?

时间:2019-05-06 16:09:25

标签: reactjs infowindow markerclusterer react-google-maps markerspiderfier

我在使用react-google-maps lib时遇到问题。 同时使用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 });
    });
  }

0 个答案:

没有答案