我不想要做的是在地图上显示从某些移动设备上选择的位置。有关位置的数据在那里。
我这里需要根据从服务器接收到的数据在地图上添加标记。
假设我已经将位置数据 ({Lat,Lang}) 设置为 状态标记, 然后如何添加它以显示在地图中。
我的地图代码如下!
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;
使用过的npm包:-谷歌地图反应
您可以尝试:
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 };
如果有错误,也请在此处显示,我们稍后可以修复
===========
标记点击事件的附加示例
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> ); }
再一次,在这里发布一些错误(如果有的话^^!)!