在 google-map-react 上动态添加标记

Question

我不想做的是在地图上显示从某些移动设备中选择的位置。 有关位置的数据在那里..

我在这里需要的是根据从服务器收到的数据在地图上添加标记。

假设我已将位置数据({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;

这段代码来自答案Implementing google maps with react

使用的 npm 包：- google-map-react

Answer 1

你可以试试：

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>
    );
  }

再次，如果有任何错误，请在此处发布 ^^ ！

Answer 2

当心。 您说的是react-google-map但您正在使用google-map-react 。 这是2个不同的包。 不要混淆他们的文档。