React Маркер Google-карта-реагировать движется вместе с картой - PullRequest
0 голосов
/ 14 февраля 2020

Я создаю приложение с React с библиотекой google-map-реаги * . Это приложение показывает ваш фактический контакт внутри карты.

Отображаются маркеры, и есть маркер, использующий геолокацию для получения пользовательских координат. Ошибка : маркер , содержащий пользовательские координаты, перемещается вместе с картой .

Мне нужно, чтобы маркер оставался на реальной позиции пользователя, а не двигался вдоль карты.

Код:

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import API_KEY from '../../key';


//test
const contacts = [
  { name: 'Yo', lat: window.navigator.geolocation.getCurrentPosition((pos) => pos.coords.latitude), lng: window.navigator.geolocation.getCurrentPosition((pos) => pos.coords.longitude) },
  { name: 'A', lat: 41.529616, lng: 2.434130 },
  { name: 'B', lat: 41.528103, lng: 2.433834 },
  { name: 'C', 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, v: '3.31' }}
          defaultCenter={this.state.center}
          defaultZoom={this.state.zoom}
        //   onChildMouseEnter={this.onChildMouseEnter}
        //   onChildMouseLeave={this.onChildMouseLeave}
        yesIWantToUseGoogleMapApiInternals
        // onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
        >
          {
            contacts.map((contact, i) =>
              <MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} />
            )
          }

        </GoogleMapReact>
      </div>
    );
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...