Reactjs google map marker maker

Question

我正在研究reactjs谷歌地图应用程序。

我想将一组lat / lng坐标推入以下代码以生成各种标记。

- 如何更改标记的颜色？

所以json看起来像这样。

  var data = [{
                "label": "The Betjeman Arms",
                "lat": 40.854885,
                "lng": -88.081807
              }, {
                "label": "Spread Eagle",
                "lat": 40.854885,
                "lng": -33.081807
              }, {
                "label": "The London Pub",
                "lat": 40.854885,
                "lng": -77.081807
              }, {
                "label": "The Marquis Of Granby",
                "lat": 34.854885,
                "lng": -68.081807
              }, {
                "label": "Old Eagle Pub",
                "lat": 30.854885,
                "lng": -78.081807
              }];

所以我想遍历（this.props.data）并创建各种＆＃34; Marker＆＃34;模板 - 当我尝试使用this.markerMaker（）时，它不会渲染。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var $ = require("jquery");
import './MapChart.css';

import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer extends Component {

    markerMaker(){
        return (
            <Marker
                title={'The marker`s title will appear as a tooltip.'}
                name={'SOMA'}
                position={{lat: 37.778519, lng: -122.405640}} />
        )
    }

    render() {
        console.log(this.props.data)

        return (
          <Map 
            google={this.props.google} 
            initialCenter={{
              lat: 40.854885,
              lng: -88.081807
            }}
            zoom={4}
          >

            <Marker onClick={this.onMarkerClick}
                    name={'Current location'} />

            <Marker
                title={'The marker`s title will appear as a tooltip.'}
                name={'SOMA'}
                position={{lat: 37.778519, lng: -122.405640}} />

          </Map>
        );
    }
}


export default GoogleApiWrapper({
  apiKey: 'xxx'
})(MapContainer)

我想出了这个

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var $ = require("jquery");
import './MapChart.css';

import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer extends Component {

    render() {
        console.log(this.props.data)

        const data = [{
                    "label": "The Betjeman Arms",
                    "lat": 40.854885,
                    "lng": -88.081807
                  }, {
                    "label": "Spread Eagle",
                    "lat": 40.854885,
                    "lng": -33.081807
                  }, {
                    "label": "The London Pub",
                    "lat": 40.854885,
                    "lng": -77.081807
                  }, {
                    "label": "The Marquis Of Granby",
                    "lat": 34.854885,
                    "lng": -68.081807
                  }, {
                    "label": "Old Eagle Pub",
                    "lat": 30.854885,
                    "lng": -78.081807
                  }];

        return (
          <Map 
            google={this.props.google} 
            initialCenter={{
              lat: 40.854885,
              lng: -88.081807
            }}
            zoom={4}
          >

            <Marker onClick={this.onMarkerClick}
                    name={'Current location'} />

                {
                  data.map(function (item, index) {
                    console.log(item.lat)
                    return (
                      <Marker
                        key={index}
                        title={'The marker`s title will appear as a tooltip.'}
                        name={'SOMA'}
                        position={{lat: item.lat, lng: item.lng}} />
                    )
                  })
                }

          </Map>
        );
    }
}


export default GoogleApiWrapper({
  apiKey: 'xx'
})(MapContainer)