Как сгруппировать метки?

Question

[kentos]

Как сгруппировать маркеры на карте? Использую react-google-maps.

Код карты:

const Map = compose(withScriptjs, withGoogleMap)((props) =>
  <GoogleMap
    defaultZoom={14}
    center={props.center}
  >
    {props.places.map(row => {
      return (
        <MarkerElement
          row={ row }
          placeToShow={ props.placeToShow }
          isOpen={ props.isOpen }
          onToggleOpen={ (placeToShow, isOpen) => props.onToggleOpen(placeToShow, isOpen) }
          places={ props.places }
          key={ row.id }
        />
      )
    })}
  </GoogleMap>

Answer 1

[0xD34F]

MarkerClusterer вам в помощь.

UPD. https://codesandbox.io/s/for-httpsqnahabrcomq56380...

Comments

[kentos]

что я могу сделать не так?

import React, { Component } from 'react'
import { InfoWindow } from 'react-google-maps'
import { CardBody, CardTitle, CardSubtitle, CardText, Row, Col } from 'reactstrap'
const { compose, withProps, withHandlers } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} = require("react-google-maps");
const { MarkerClusterer } = require("react-google-maps/lib/components/addons/MarkerClusterer");

class MarkerElement extends Component {
  state = {
    placeAdditionalDetails: [],
  }

  getBikePointOccupancy() {
      fetch('https://api-argon.tfl.gov.uk/Occupancy/BikePoints/' + this.props.row.id)
          .then(response => response.json())
          .then((oc) => {
            this.setState({ placeAdditionalDetails: oc[0] })
          })
  }


  onMarkerClick() {
        this.getBikePointOccupancy();
        this.props.onToggleOpen(this.props.row.id, true);
    }

  render() {
    const { row, onToggleOpen, placeToShow, isOpen } = this.props;
    return (
    withHandlers({
    onMarkerClustererClick: () => (markerClusterer) => {
      const clickedMarkers = markerClusterer.getMarkers()
      console.log(`Current clicked markers length: ${clickedMarkers.length}`)
      console.log(clickedMarkers)
    },
  }),
  withScriptjs,
  withGoogleMap
)(props =>
<MarkerClusterer
      onClick={props.onMarkerClustererClick}
      averageCenter
      enableRetinaIcons
      gridSize={60}
    >
      <Marker position={ {lat: row.lat, lng: row.lon} } id={ row.id } onClick={() => this.onMarkerClick()}>
          {
            row.id === placeToShow  && isOpen &&
            <Row>
              <InfoWindow>
                    <CardBody>
                        <Col md={6}>
                          <CardTitle>
                            {
                              row  !== undefined &&
                              row.commonName
                            }
                          </CardTitle>
                        </Col>
                        <Col md={6}>
                            <p>Bikes count: {this.state.placeAdditionalDetails.bikesCount}</p>
                            <p>Empty docks: {this.state.placeAdditionalDetails.emptyDocks}</p>
                          <p>Total docks: {this.state.placeAdditionalDetails.totalDocks}</p>
                        </Col>
                    </CardBody>
              </InfoWindow>
            </Row>
          }
      </Marker>
      </MarkerClusterer>
    );
  }
}

export default MarkerElement;

[0xD34F]

Один (пока не вижу смысла говорить о чём-либо ещё) вопрос (риторический) - почему в MarketClusterer передаётся всего один маркер?

Ну и это - для выкладывания кода есть песочницы.

UPD. Дополнил ответ примером.

[kentos]

0xD34F, берется с api все значения, и position={ {lat: row.lat, lng: row.lon}