如何使用react-google-maps显示多个标记
如何使用react-google-maps显示多个标记
提问于 2017-05-09 09:53:42
我正在尝试使用一个名为react-google-map的npm包来显示多个标记，但我遇到了困难。我在这里跟随演示如何显示一个地图标记(https://tomchentw.github.io/react-google-maps/events/simple-click-event)，但是，当我在GoogleMap组件中添加第二个标记元素时，我无法显示该标记(我还更改了坐标)。这真的很困扰我，如果有人能指出哪里出了问题，我将不胜感激。
谢谢。
这是我摆弄过的代码。我唯一改变的是添加了第二个标记，并添加了一个新的坐标。
/* global google */
import {
default as React,
Component,
} from "react";
import withGoogleMap from './assets/withGoogleMap';
import GoogleMap from './assets/GoogleMap';
import Marker from './assets/Marker';
const SimpleClickEventExampleGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapMounted}
zoom={props.zoom}
center={props.center}
onCenterChanged={props.onCenterChanged}
>
<Marker
defaultPosition={props.center}
title="Click to zoom"
onClick={props.onMarkerClick}
/>
<Marker
defaultPosition={props.marker2center}
title="Click to zoom"
onClick={props.onMarkerClick}
/>
</GoogleMap>
));
const INITIAL_CENTER = { lat: -25.363882, lng: 131.044922 };
const MARKER1_CENTER = { lat: -25.363882, lng: 131.044922 };
const MARKER2_CENTER = { lat: -25.44, lng: 131.55 };
/*
* https://developers.google.com/maps/documentation/javascript/examples/event-simple
*
* Add <script src="https://maps.googleapis.com/maps/api/js"></script> to your HTML to provide google.maps reference
*/
export default class SimpleClickEventExample extends Component {
state = {
zoom: 4,
center: INITIAL_CENTER,
marker2center: MARKER2_CENTER
};
handleMapMounted = this.handleMapMounted.bind(this);
handleCenterChanged = this.handleCenterChanged.bind(this);
handleMarkerClick = this.handleMarkerClick.bind(this);
handleMapMounted(map) {
this._map = map;
}
handleMarkerClick() {
this.setState({
zoom: 8,
});
}
handleCenterChanged() {
const nextCenter = this._map.getCenter();
if (nextCenter.equals(new google.maps.LatLng(INITIAL_CENTER))) {
// Notice: Check nextCenter equality here,
// or it will fire center_changed event infinitely
return;
}
if (this._timeoutId) {
clearTimeout(this._timeoutId);
}
this._timeoutId = setTimeout(() => {
this.setState({ center: INITIAL_CENTER });
this._timeoutId = null;
}, 3000);
this.setState({
// Because center now is a controlled variable, we need to set it to new
// value when "center_changed". Or in the next render it will use out-dated
// state.center and reset the center of the map to the old location.
// We can never drag the map.
center: nextCenter,
});
}
componentWillUnmount() {
if (this._timeoutId) {
clearTimeout(this._timeoutId);
}
}
render() {
return (
<div className='googleMap' style={{width: "500px", height: "500px", margin: "0 auto"}}>
<SimpleClickEventExampleGoogleMap
containerElement={
<div style={{ height: `100%` }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
zoom={this.state.zoom}
center={this.state.center}
onMapMounted={this.handleMapMounted}
onCenterChanged={this.handleCenterChanged}
onMarkerClick={this.handleMarkerClick}
/>
</div>
);
}
}回答 5
Stack Overflow用户
发布于 2018-07-10 00:03:28
要显示多个标记，您所要做的就是使用标记位置在数组中迭代。
{marks.map((mark, index) => <Marker key={index} position={mark} />)}这是一个具有更多功能的解决方案。每当用户单击该代码片段时，它就会在地图上添加多个圆圈。
import React, { Component } from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Circle } from "react-google-maps";
const Map = withScriptjs(
withGoogleMap(props => (
<GoogleMap
defaultZoom={12}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
onClick={e => props.onMapClick(e)}
>
{props.marks.map((mark, index) => (
<Circle
key={index}
center={mark}
radius={1000}
options={{
strokeColor: "#66009a",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: `#66009a`,
fillOpacity: 0.35,
zIndex: 1
}}
/>
))}
</GoogleMap>
))
);
class ReportsPage extends Component {
state = {
marks: []
};
setMark = e => {
this.setState({ marks: [...this.state.marks, e.latLng] });
};
deleteMarkS = () => {
this.setState({
marks: []
});
};
render() {
const { marks } = this.state;
return (
<div>
<button onClick={this.deleteMark}>DELETE MARKS</button>
<Map
googleMapURL="http://maps.googleapis.com/maps/api/js?key=[YOUR GOOGLE MAPS KEY]"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
onMapClick={this.setMark}
marks={marks}
/>;
</div>
);
}
}
export default ReportsPage;别忘了为你的real key更改你的谷歌地图密钥。
Stack Overflow用户
发布于 2017-05-09 11:45:14
您需要将标记数组作为子级传递给GoogleMap组件，并按如下方式在它们上进行映射：
<GoogleMap>
{props.markers.map(marker => (
<Marker
position={{ lat: marker.latitude, lng: marker.longitude }}
key={marker.id}
/>
))}
</GoogleMap>有关更多信息，请访问https://github.com/tomchentw/react-google-maps#withgooglemap和https://tomchentw.github.io/react-google-maps/addons/marker-clusterer
Stack Overflow用户
发布于 2017-06-24 13:55:29
我想您忘了在SimpleClickEventExampleGoogleMap组件中传递正确的marker2center。
看一看marker2center={this.state.marker2center}
<SimpleClickEventExampleGoogleMap
containerElement={
<div style={{ height: `100%` }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
zoom={this.state.zoom}
center={this.state.center}
marker2center={this.state.marker2center}
onMapMounted={this.handleMapMounted}
onCenterChanged={this.handleCenterChanged}
onMarkerClick={this.handleMarkerClick}
/>当然，如果您要处理一千个标记，您可以使用map，这样您就不需要手动将每个标记都放入地图中。
稍作更改如下所示：
<SimpleClickEventExampleGoogleMap
containerElement={
<div style={{ height: `100%` }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
zoom={this.state.zoom}
center={this.state.center}
markers={[MARKER1_CENTER, MARKER2_CENTER]}
onMapMounted={this.handleMapMounted}
onCenterChanged={this.handleCenterChanged}
onMarkerClick={this.handleMarkerClick}
/>
const SimpleClickEventExampleGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapMounted}
zoom={props.zoom}
center={props.center}
onCenterChanged={props.onCenterChanged}
>
{props.markers.map((marker, index)=> {
return (
<Marker
position={marker}
title="Click to zoom"
onClick={props.onMarkerClick}
/>
)
})}
</GoogleMap>
));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43859785
复制相关文章
相似问题
腾讯云开发者
