Question

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

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

之所以这样，是因为这两种技术略有不同，使用有效聚类的技术不会让我映射组件，而是必须返回一个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,
    },
    zoom: 11,
  };

  render() {
    if (this.props.intelAlerts.length) {
      return (
        <GoogleMapReact
          style={{ height: "100vh", width: "100%", 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中是否有等效项？

Answer 1

您可以仅动态加载Maps JS API，而不必依赖于第三方库/软件包。这样，您只需遵循他们的official documentations。在此示例中，我遵循以下两个步骤对地图标记进行聚类并添加自定义标记：

以下是我制作的Stackblitz示例供您参考：https://stackblitz.com/edit/react-map-cluster-64766101

App.js

import React, { Component } from "react";
import { render } from "react-dom";
import Map from "./components/map";
import "./style.css";

class App extends Component {
  render() {
    return (
      <Map
        id="myMap"
        options={{
          center: { lat: -28.024, lng: 140.887 },
          zoom: 3
        }}
      />
    );
  }
}

export default App;

map.js

import React, { Component } from "react";
import { render } from "react-dom";

const locations = [
  { lat: -31.56391, lng: 147.154312 },
  { lat: -33.718234, lng: 150.363181 },
  { lat: -33.727111, lng: 150.371124 },
  { lat: -33.848588, lng: 151.209834 },
  { lat: -33.851702, lng: 151.216968 },
  { lat: -34.671264, lng: 150.863657 },
  { lat: -35.304724, lng: 148.662905 },
  { lat: -36.817685, lng: 175.699196 },
  { lat: -36.828611, lng: 175.790222 },
  { lat: -37.75, lng: 145.116667 },
  { lat: -37.759859, lng: 145.128708 },
  { lat: -37.765015, lng: 145.133858 },
  { lat: -37.770104, lng: 145.143299 },
  { lat: -37.7737, lng: 145.145187 },
  { lat: -37.774785, lng: 145.137978 },
  { lat: -37.819616, lng: 144.968119 },
  { lat: -38.330766, lng: 144.695692 },
  { lat: -39.927193, lng: 175.053218 },
  { lat: -41.330162, lng: 174.865694 },
  { lat: -42.734358, lng: 147.439506 },
  { lat: -42.734358, lng: 147.501315 },
  { lat: -42.735258, lng: 147.438 },
  { lat: -43.999792, lng: 170.463352 }
];

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map: ""
    };
  }

  onScriptLoad() {
    this.state.map = new window.google.maps.Map(
      document.getElementById(this.props.id),
      this.props.options
    );
    this.addMarker();
  }

  componentDidMount() {
    if (!window.google) {
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
      var x = document.getElementsByTagName("script")[0];
      x.parentNode.insertBefore(s, x);

      var s2 = document.createElement("script");
      s2.type = "text/javascript";
      s2.src = `https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js`;
      var x2 = document.getElementsByTagName("script")[0];
      x2.parentNode.insertBefore(s2, x2);

      s.addEventListener("load", e => {
        this.onScriptLoad();
      });
    } else {
      this.onScriptLoad();
    }
  }
  // Add some markers to the map.
  addMarker() {
    const markers = locations.map((location, i) => {
      return new google.maps.Marker({
        position: location,
        icon:
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/info-i_maps.png",
        map: this.state.map
      });
    });
    // Add a marker clusterer to manage the markers.
    new MarkerClusterer(this.state.map, markers, {
      imagePath:
        "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
    });
  }

  render() {
    return <div className="map" id={this.props.id} />;
  }
}

export default Map;

注意：用实际的API密钥替换API密钥占位符

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

1 个答案: