Reactjs 谷歌地图做出反应,用lat lng添加标记
我使用“谷歌地图反应”,并试图添加新的标记到我的地图点击 我目前设法将特定的latLng记录在控制台上,但似乎无法创建新的latLng。我还没反应过来 我的onmaclick用于查找纬度和经度。但我认为我需要将位置添加到数组中,然后使用该数组更新地图。可能是错的Reactjs 谷歌地图做出反应,用lat lng添加标记,reactjs,google-maps,Reactjs,Google Maps,我使用“谷歌地图反应”,并试图添加新的标记到我的地图点击 我目前设法将特定的latLng记录在控制台上,但似乎无法创建新的latLng。我还没反应过来 我的onmaclick用于查找纬度和经度。但我认为我需要将位置添加到数组中,然后使用该数组更新地图。可能是错的 onMapClick = (map,maps,e) => { const { latLng } = e; const latitude = e.latLng.lat(); const longit
onMapClick = (map,maps,e) => {
const { latLng } = e;
const latitude = e.latLng.lat();
const longitude = e.latLng.lng();
console.log(latitude + ", " + longitude);
var marker = new window.google.maps.Marker({
position: e.latLng,
setMap: map,
});
}
我目前使用的解决方案是,我在render()中用数组在Marker中的位置硬编码了一些标记
<Marker
onClick={this.onMarkerClick}
name={storedLocations[0]}
position={{lat:listLatitude[0], lan:listLongitude[0]}}
/>
我的信息窗口是:
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
</div>
</InfoWindow>
</Map>
{this.state.selectedPlace.name}
我的onmaclick用于查找纬度和经度。但我
我想我需要将位置添加到数组中,然后使用该位置
更新地图
这确实是反应的方式,但不是通过谷歌MAP API实例化标记,考虑通过“代码>状态< /代码>来保持数据(标记位置),并且反应将是这样的:
class MapContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
locations: []
};
this.handleMapClick = this.handleMapClick.bind(this);
}
handleMapClick = (ref, map, ev) => {
const location = ev.latLng;
this.setState(prevState => ({
locations: [...prevState.locations, location]
}));
map.panTo(location);
};
render() {
return (
<div className="map-container">
<Map
google={this.props.google}
className={"map"}
zoom={this.props.zoom}
initialCenter={this.props.center}
onClick={this.handleMapClick}
>
{this.state.locations.map((location, i) => {
return (
<Marker
key={i}
position={{ lat: location.lat(), lng: location.lng() }}
/>
);
})}
</Map>
</div>
);
}
}
这演示了如何通过googlemaps-react
library在地图上单击添加makers
const MarkersList = props => {
const { locations, ...markerProps } = props;
return (
<span>
{locations.map((location, i) => {
return (
<Marker
key={i}
{...markerProps}
position={{ lat: location.lat(), lng: location.lng() }}
/>
);
})}
</span>
);
};