react-google-mapにマーカーを動的に追加する

Question

私がやりたいことは、マップ上の一部のモバイルデバイスから選択した場所を表示することです。 場所に関するデータはあります。

ここで必要なのは、サーバーから受信したデータに応じてマーカーをマップに追加することです。

私は地図に表示するためにこれを追加することができるどのようにそして状態マーカー に位置データ（{緯度、ラング}）を設定していると仮定する。

マイマップコードは次のとおりです。

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パッケージ： - グーグルマップが反応し

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

マーカーにCLICK-EVENT FOR

例を追加しましたもう一度ポストをそれを修正することができます何かあればエラー！^^！

Answer 2

注意してください。あなたはreact-google-mapと言っていますが、google-map-reactを使用しています。それらは2つの異なるパッケージです。ドキュメントを混用しないでください。

私はgoogle-map-reactを個人的なプロジェクトで使用しています。ここでコードを確認できます：https://github.com/BrodaNoel/devseverywhere/blob/master/src/pages/AnalyticsPage/AnalyticsPage.jsx#L227