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

小编典典

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

reactjs

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

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

假设我已经将位置数据 （{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包：-谷歌地图反应

阅读 338

2020-07-22

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

再一次，在这里发布一些错误（如果有的话^^！）！

2020-07-22