Маркеры не работают с Google-Map-реагировать - PullRequest
Новая
       56

Маркеры не работают с Google-Map-реагировать

0 голосов
/ 10 февраля 2020

Я работаю с библиотекой 'google-map-реакции' и перепробовал все, но маркеры не отображаются. Я передаю координаты маркеру разными способами, но ни один из них не сработал. Вот мой код и хранилище:

https://github.com/jorginyu/ubica

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const API_KEY = 'WTFULOOKINAT';

const contacts = [
  { name: 'Spiderman', lat: 41.529616, lng: 2.434130 },
  { name: 'Iron Man', lat: 41.528103, lng: 2.433834 },
  { name: 'Hulk', lat: 41.530192, lng: 2.422994 }
];

const MarkersC = (text ) => <div className="contact">{text}</div>;

export default class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      center: {
        lat: 41.528452,
        lng: 2.434195
      },
      zoom: 18
    }
  }


  render() {
    return (
      // Important! Always set the container height explicitly
      <div className="mt-5" style={{ height: '80vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: API_KEY }}
          defaultCenter={this.state.center}
          defaultZoom={this.state.zoom}
        >
            {contacts.map((contact,i) => {
            <MarkersC  position={{lat: contact.lat, lng: contact.lng}} text={contact.name} key={i} />
          })}

        </GoogleMapReact>
      </div>
    );
  }
}

Что я могу сделать? Спасибо за ваше время :) 1009 *

Ответы [ 3 ]

1 голос
/ 10 февраля 2020

Если вы откроете консоль браузера, вы увидите ошибку. Проблема в том, что ваш MarkerC компонент и как вы пытаетесь получить text prop.

Параметр компонента - это объект со всеми свойствами, которые ему передаются.

Вы не деструктурируете его, чтобы получить text, вы просто используете весь параметр и пытаетесь отобразить его.

Так что вам нужно правильно деструктурировать его как const MarkersC = ( {text} ) => ..

Вместо 

const MarkersC = ( text ) => <div className="contact">{text}</div>;

должно быть 

const MarkersC = ( {text} ) => <div className="contact">{text}</div>;

Обновление

Только что заметил, google-map-react ожидайте найти lat и lng свойства на маркере. Вы обернули их в свойство position, чтобы их нельзя было найти.

Таким образом, вы должны использовать

либо 

<MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} />

, либо распространять все contact объект, который обладает этими свойствами 

<MarkersC {...contact} key={i} />

, так что lat, lng и text являются прямыми свойствами компонента MarkersC.

0 голосов
/ 14 февраля 2020

В вашем вопросе вы указали недопустимый ключ GoogleMap, поэтому в консоли отображается сообщение об ошибке Google Maps JavaScript API error: InvalidKeyMapError.

Так что предоставьте действительный ключ GoogleMap или пустой (const API_KEY = '') только для разработки.

В моем случае с пустым API_KEY он работает нормально.

(Ваш git код репо отличается от кода, который вы разместили здесь в StackOverflow.)

0 голосов
/ 10 февраля 2020

Возникла проблема с форматированием. Я удалил пробелы:

ТО: 

          {
            contacts.map((contact, i) => 
              <MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} />
            )
          }

СЕЙЧАС: 

          {
            contacts.map((contact, i) => <MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} /> )
          }
...