谷歌地图反应标记聚类问题

问题描述

您好，我正在建立一个反应位点，理想情况下应包括标记物的聚类。

我使用了两种不同的技术，既可以有效地显示在地图上，也可以均匀地显示在群集上，但是我希望可以将这些技术结合起来。

之所以这样，是因为这两种技术略有不同，使用有效聚类的技术不会让我映射组件，而是必须返回一个Google标记。

这是我使用的第一项技术。

import React,{ Component,useState } from "react";
import GoogleMapReact from "google-map-react";

import TravelAlert from "./TravelAlerts/TravelAlerts";
import IntelAlert from "./IntelAlerts/IntelAlerts";

import "./GoogleMap.css";

//class component
export class GoogleMap extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {}
  static defaultProps = {
    center: {
      lat: 59.955413,lng: 30.337844,},zoom: 11,};

  render() {
    return (
      <>
        <GoogleMapReact
          style={{ height: "100vh",width: "100%",zIndex: -1 }}
          bootstrapURLKeys={{
            key: "AIzaSyAfpKoor5CLGg-HbDwdKHq9mGij2JA-YzE",}}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
//Simply .mapping a bunch of props (if done this way component just needs a lat and a lng prop for each component )
          {this.props.travelAlerts.map((ta) => (
            <TravelAlert
              lat={ta.latitude}
              lng={ta.longitude}
              title={ta.title}
              description={ta.description}
              notes={ta.notes}
              riskId={ta.riskId}
              startDate={ta.startDate}
              endDate={ta.endDate}
            />
          ))}

          {this.props.intelAlerts.map((ta) => (
            <IntelAlert
              lat={ta.latitude}
              lng={ta.longitude}
              title={ta.title}
              description={ta.description}
              notes={ta.notes}
              riskId={ta.riskId}
              startDate={ta.startDate}
              endDate={ta.endDate}
            />
          ))}
        </GoogleMapReact>
      </>
    );
  }
}

export default GoogleMap;

我真的很喜欢这种技术，因为它只允许您将任何组件映射到屏幕的经纬度。但是，使用这种技术，我无法使这些标记聚类。

这是第二种技术，但这不允许我映射任何自定义标记，这意味着我必须在加载地图之前映射出地图的标记。这不是首选，因为我无法映射自己的自定义标记。

import React,{ Component } from "react";
import GoogleMapReact from "google-map-react";
import intelAlert from "../../../components/Map/MapContainer/GoogleMap/IntelAlerts/IntelAlerts";
// import MarkerClusterer from "@google/markerclusterer";

export default class GoogleMapContainer extends Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.src =
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js";
    script.async = true;
    document.body.appendChild(script);
  }

  setGoogleMapRef(map,maps) {
    this.googleMapRef = map;
    this.googleRef = maps;
    
    let markers =
      this.props.intelAlerts &&
      this.props.intelAlerts.map((location) => {
        var loc = { lat: location.latitude,lng: location.longitude };
        return new this.googleRef.Marker({ position: loc });
      });
    let markerCluster = new MarkerClusterer(map,markers,{
      imagePath:
        "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",gridSize: 10,minimumClusterSize: 2,});
  }

  static defaultProps = {
    center: {
      lat: 59.95,lng: 30.33,};

  render() {
    if (this.props.intelAlerts.length) {
      return (
        <GoogleMapReact
          style={{ height: "100vh",zIndex: -1 }}
          bootstrapURLKeys={{ key: "AIzaSyAfpKoor5CLGg-HbDwdKHq9mGij2JA-YzE" }}
          yesIWantToUseGoogleMapApiInternals
          onGoogleApiLoaded={({ map,maps }) => this.setGoogleMapRef(map,maps)}
          defaultCenter={{ lat: -31.56391,lng: 147.154312 }}
          defaultZoom={15}
          options={{ streetViewControl: true }}
        />
      );
    } else {
      return <></>;
    }
  }
}

有没有办法能够绘制出自己的自定义标记并包括标记聚类。

任何帮助或指示都意味着分配，因为有关此问题的文档很少。

我正在使用google-map-react npm软件包。

编辑 我在角度上做了类似的事情。 在Angular中，您可以轻松地做到这一点。

<div ng-if="showTravellers" >
      <agm-marker-cluster    [minimumClusterSize]= "minClusterSize"> 

          <agm-marker *ngFor="let m of intelligenceAlerts;let i = index;" [visible]="showIntelligence"  [latitude]="m.latitude" [longitude]="m.longitude" [iconUrl]= 'getTheIcon(m.riskId)'  >
            <agm-snazzy-info-window [maxWidth]="600" maxHeight="200px" [closeWhenOthersOpen]="true" backgroundColor="getTheColor(m.colour);">
                <ng-template>
                    <mat-form-field appearance="standard">
                        <mat-card> <h3><b>{{m.colour}}</b> </h3></mat-card>
                  <mat-card> <h3><b>{{m.title}}</b> </h3></mat-card>
                  <mat-card> <p>{{m.notes}} </p></mat-card>
                   <button>Description</button> <button>Start Date</button><button>End Date</button><button>Notes</button>
                 </mat-form-field>
                </ng-template>
               </agm-snazzy-info-window> 
         </agm-marker>
    </agm-marker-cluster>
    </div>

reactjs中是否有等效项？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）