Карта листовок с кластером ответной-листовки-маркером кластера или закрывается на клик - PullRequest
Новая
       99

Карта листовок с кластером ответной-листовки-маркером кластера или закрывается на клик

1 голос
/ 08 марта 2020

У меня есть карта Leaflet в React с использованием react-leaflet и react-leaflet-markercluster

Кажется, что кластеризация работает прекрасно, но если я нажимаю на один из кластеров CircleMarker или Tooltip, он открывает новый ссылка (которая у меня есть как onClick), но, к сожалению, кластер spiderfy закрывается, поэтому, если пользователь хочет щелкнуть другие ссылки, ему необходимо повторно открыть (и повторно spiderfy) кластер, а затем промыть и повторить. Есть ли способ оставить spiderfy открытым на клик и закрыть его при уменьшении (последний, который уже ведет себя правильно)?

Например, нажав «Huckberry», откроется новая ссылка, закройте всплывающую подсказку:

enter image description here

Но, к сожалению, кластер также закроется и начнет пауковаться после нажатия на ссылку onClick:

enter image description here

А вот и мой код: 

        <Map
          style={{ height: "480px", width: "100%", opacity: "0.9" }}
          zoom={screensizeZoom}
          maxZoom={20}
          center={[37.7687477, -99.6820275]}
          attributionControl={false}>
          <TileLayer url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png"
            attribution="Map by <a href='http://stamen.com' target='_blank'>Stamen Design</a> | &copy; <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
          />

          <AttributionControl position="bottomright" prefix={false} />

          <MarkerClusterGroup
            spiderfyDistanceMultiplier={1}
            showCoverageOnHover={false}
            maxClusterRadius={35}
          >
            {this.state.dataMaps.map((dataItem, k) => {
              let { coordinates, company, url, loc } = dataItem;
              return (
                <CircleMarker onClick={() => { window.open(url) }}
                  key={k}
                  center={[coordinates[0], coordinates[1]]}
                  position={[coordinates[0], coordinates[1]]}
                >
                  <Tooltip direction="right" offset={[-8, -2]} opacity={1}>
                    <span><a href={url}>{company}</a></span>
                    <span>{loc}</span>
                  </Tooltip>
                </CircleMarker>);
            })}
          </MarkerClusterGroup>

        </Map>

Спасибо!

...