reagieren-google-maps Anpassen der Marker-Symbol

Derzeit habe ich gemacht die map-Komponente in einem Mehrweg-Komponente erfolgreich mit InfoModal zu zeigen, ein Symbol, jedoch, die standard-red-Google Map-Symbol habe ich nicht geändert, und ich möchten, erstellen Sie ein benutzerdefiniertes Symbol für mich. Ich bin mir nicht sicher, mit ES6 und JSX-syntax, was ich tun muss. Ich schaute zu reagieren-google-maps-Probleme und versucht, um zu sehen, ob es irgendwelche aktuellen oder aktualisierten material überall für, wie Sie dies tun (ist wohl einfacher), aber ich bin mir nicht sicher, ob darauf reagiert-google-maps hat etwas für benutzerdefinierte marker-Erstellung in addons oder das richtige format.

import React, { Component } from 'react'
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps'
import { DEFAULT_MARKER } from '../../constants/mapDefaults'

const MapGoogleMap = withGoogleMap(props => (
  <GoogleMap
    defaultZoom={16}
    center={props.center}
  >
    {props.markers.map((marker, index) => (
      <Marker
        key={index}
        position={marker.position}
        onClick={() => props.onMarkerClick(marker)}
      >

        {marker.showInfo && (
          <InfoWindow onCloseClick={() => props.onMarkerClose(marker)}>
            <div>{marker.infoContent}</div>
          </InfoWindow>
        )}
      </Marker>
    ))}
  </GoogleMap>
))

export default class Map extends Component {
  state = {
    center: {
      lat: 28.3421135,
      lng: -80.6149092
    },

    markers: [
      {
        position: new google.maps.LatLng(28.3431165, -80.6135908),
        showInfo: false,
        infoContent: (
          <svg
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 16 16"
          >
            <path
              d="M3.5 0c-1.7 0-3 1.6-3 3.5 0 1.7 1 3 2.3 3.4l-.5 8c0
              .6.4 1 1 1h.5c.5 0 1-.4 1-1L4 7C5.5 6.4 6.5 5 6.5
              3.4c0-2-1.3-3.5-3-3.5zm10 0l-.8 5h-.6l-.3-5h-.4L11
              5H10l-.8-5H9v6.5c0 .3.2.5.5.5h1.3l-.5 8c0 .6.4 1 1 1h.4c.6 0
              1-.4 1-1l-.5-8h1.3c.3 0 .5-.2.5-.5V0h-.4z"
            />
          </svg>
        )
      }, DEFAULT_MARKER
    ]
  }

  handleMarkerClick = this.handleMarkerClick.bind(this);
  handleMarkerClose = this.handleMarkerClose.bind(this);

  handleMarkerClick (targetMarker) {
    this.setState({
      markers: this.state.markers.map(marker => {
        if (marker === targetMarker) {
          return {
            ...marker,
            showInfo: true
          }
        }
        return marker
      })
    })
  }

  handleMarkerClose (targetMarker) {
    this.setState({
      markers: this.state.markers.map(marker => {
        if (marker === targetMarker) {
          return {
            ...marker,
            showInfo: false
          }
        }
        return marker
      })
    })
  }

  render () {
    return (
      <MapGoogleMap
        containerElement={
          <div style={{ height: `500px` }} />
        }
        mapElement={
          <div style={{ height: `500px` }} />
        }
        center={this.state.center}
        markers={this.state.markers}
        onMarkerClick={this.handleMarkerClick}
        onMarkerClose={this.handleMarkerClose}
      />
    )
  }
}

InformationsquelleAutor Franklin | 2017-07-26