[英]Dynamically Adding Markers on google-map-react
What I wan't to do is to show the location picked from some mobile devices on the Map.我不想做的是在地图上显示从某些移动设备中选择的位置。 Data about the locations are there..有关位置的数据在那里..
What I need here is to add Markers on the map depending on the data received from the server.我在这里需要的是根据从服务器收到的数据在地图上添加标记。
Assume I have set the location data ({Lat,Lang}) to the state markers Then How can I add this to show in Map.假设我已将位置数据({Lat,Lang})设置为状态标记,那么如何将其添加到地图中。
My Map Code is as follows!我的地图代码如下!
import React, { Component } from 'react'; import GoogleMapReact from 'google-map-react'; const AnyReactComponent = ({ text }) => <div>{text}</div>; class MyClass extends Component { constructor(props){ super(props); } render() { return ( <GoogleMapReact defaultCenter={this.props.center} defaultZoom={this.props.zoom} style={{height: '300px'}} > <AnyReactComponent lat={59.955413} lng={30.337844} text={'Google Map'} /> </GoogleMapReact> ); } } MyClass.defaultProps = { center: {lat: 59.95, lng: 30.33}, zoom: 11 }; export default MyClass;
This Code is from the answer Implementing google maps with react这段代码来自答案Implementing google maps with react
Used npm package :- google-map-react使用的 npm 包:- google-map-react
You may try:你可以试试:
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ img_src }) => <div><img src={img_src} className="YOUR-CLASS-NAME" style={{}} /></div>;
class MyClass extends Component {
constructor(props){
super(props);
this.state = {
markers: [],
}
}
componentDidMount(){
// or you can set markers list somewhere else
// please also set your correct lat & lng
// you may only use 1 image for all markers, if then, remove the img_src attribute ^^
this.setState({
markers: [{lat: xxxx, lng: xxxx, img_src: 'YOUR-IMG-SRC'},{lat: xxxx, lng: xxxx, img_src: 'YOUR-IMG-SRC' },{lat: xxxx, lng: xxxx, img_src: 'YOUR-IMG-SRC'}],
});
}
render() {
return (
<GoogleMapReact
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
style={{height: '300px'}}
>
{this.state.markers.map((marker, i) =>{
return(
<AnyReactComponent
lat={marker.lat}
lng={marker.lng}
img_src={marker.img_src}
/>
)
})}
</GoogleMapReact>
);
}
}
MyClass.defaultProps = {
center: {lat: 59.95, lng: 30.33},
zoom: 11
};
If this has error, please show here too, then we can fix it later如果这里有错误,请也在这里显示,然后我们可以稍后修复它
=========== ============
ADDED EXAMPLE FOR CLICK-EVENT ON MARKERS标记上点击事件的附加示例
markerClicked(marker) {
console.log("The marker that was clicked is", marker);
// you may do many things with the "marker" object, please see more on tutorial of the library's author:
// https://github.com/istarkov/google-map-react/blob/master/API.md#onchildclick-func
// Look at their examples and you may have some ideas, you can also have the hover effect on markers, but it's a bit more complicated I think
}
render() {
return (
<GoogleMapReact
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
style={{height: '300px'}}
>
{this.state.markers.map((marker, i) =>{
return(
<AnyReactComponent
lat={marker.lat}
lng={marker.lng}
img_src={marker.img_src}
onChildClick={this.markerClicked.bind(this, marker)}
/>
)
})}
</GoogleMapReact>
);
}
Once again, post here some errors if any ^^ !再次,如果有任何错误,请在此处发布 ^^ !
Be careful.当心。 You said react-google-map
but you are using google-map-react
.您说的是react-google-map
但您正在使用google-map-react
。 Those are 2 different packages.这是2个不同的包。 Do not mix up their documentation.不要混淆他们的文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.