【发布时间】：2021-02-22 05:25:23
【问题描述】：
您好，我正在制作一个理想情况下应该包含标记聚类的反应站点。
为此，我使用了两种不同的技术，既可以有效地显示在地图上，一种甚至可以聚类，但我希望我可以结合这些技术。
原因是这两种技术略有不同，使用有效集群的技术不会让我绘制出组件，而是必须返回一个谷歌标记。
这是我使用的第一个技术。
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;
我真的很喜欢这种技术，因为它只允许您将任何组件映射到屏幕的 lat 和 lng。然而，使用这种技术，我无法使这些标记的聚类工作。
这是第二种技术，但这不允许我绘制任何自定义标记，这意味着我必须在地图加载之前绘制出地图的标记。这不是首选，因为我无法映射自己的自定义标记。
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 中是否有等价物？
【问题讨论】：
标签： reactjs google-maps react-google-maps