реагировать иконки Google Maps не отображаются - PullRequest
Новая
       34

реагировать иконки Google Maps не отображаются

0 голосов
/ 23 мая 2018

У меня проблема с отображением значков на карте Google.Вот мой код: 

import React, { Component } from 'react'
import { compose, withProps, withStateHandlers } from 'recompose'
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps'
import MapStyles from './data/MapStyles'

export const Map = compose(
    withStateHandlers(() => ({
    isOpen: false,
  }), {
    onToggleOpen: ({ isOpen }) => () => ({
      isOpen: !isOpen,
    })
  }),
  withScriptjs,
  withGoogleMap
)(props => {
        return (
        <GoogleMap
            defaultZoom={13}
            defaultCenter={{ lat: 52.229676, lng: 21.012229 }}
            defaultOptions={{ styles: MapStyles }}
            mapTypeControl={false}
        >{ props.markers.map(marker => {
            console.log(marker.location);
            <Marker
                {...marker}
                key={marker.place_id}
                position={marker.location}
                title={marker.title}
                icon={{
                    url: 'icons/icon.png'
                  }}
                onClick={props.onToggleOpen}
                >
                {props.isOpen && 
                <InfoWindow onCloseClick={props.onToggleOpen}>
                    <div>Open</div>
                </InfoWindow>}
            </Marker>
        })}
        </GoogleMap>

);})

export default Map

Позиции для маркеров отображаются на консоли console.log, но они не отображаются на карте ... Я не знаю почему .... Может быть, некоторыевы знаете, почему это происходит ... Вот ссылка на этот проект на Github: https://github.com/hajczek/Neighborhood---Warsaw-Cultural-Map

Спасибо за любые подсказки.

1 Ответ

0 голосов
/ 23 мая 2018

Вы пропустили return в проекции карты - 

>{ props.markers.map(marker => {
            console.log(marker.location);
            <Marker

добавьте return до <Marker

>{ props.markers.map(marker => {
            console.log(marker.location);
            return <Marker

Рабочий образец для codesandbox

...