Блог

Главная - Вопросы по программированию - Использование маркеров в отдельном компоненте для google-maps-react

Использование маркеров в отдельном компоненте для google-maps-react

#javascript #reactjs #google-maps

#javascript #reactjs #google-карты

Вопрос:

Моя цель — иметь возможность использовать отдельный компонент «Маркеры», который содержит все маркеры для карты. Я планирую использовать чистый компонент для повышения производительности. При выполнении этого я столкнулся с некоторыми проблемами с рендерингом маркеров.

Проблема сводится к приведенному ниже примеру. Маркер не отображается, когда customMarker = true 

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

const MyOwnMarker = (props) => <Marker position={{lat:40, lng:-88}}/>

export class MapContainer extends React.Component {
  
  render = () => {
    const customMarker = true
    return (
      <Map
          google={this.props.google}
          initialCenter={{lat: 40,lng: -88}}
          zoom={15}
        >
          { customMarker ? 
            <MyOwnMarker /> : 
            <Marker position={{lat:40, lng:-88}}/>
          }
      </Map>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: (process.env.REACT_APP_GOOGLE_API_KEY)
})(MapContainer)

Желаемый результат заключается в том, что when customMarker = true он должен давать тот же результат, что и when customMarker = false , поскольку реквизиты идентичны. Прямо сейчас маркер не виден, когда customMarker = true .

Ответ №1:

Кажется, что когда вы задаете вопрос — ваш разум говорит: «На самом деле, вот как это работает». Вот как я это решил. Это может быть полезно для всех, кто видит этот пост.

В документации google-maps-react они также передают реквизиты «карта» и «google». Они не были учтены. Таким образом, добавление всех неопределенных реквизитов позволило дополнительному компоненту работать.

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

const MyOwnMarker = (props) => React.createElement(Marker,{
  position:{lat:40, lng:-88}, 
  ...props
})

export class MapContainer extends React.Component {
  
  render = () => {
    const customMarker = true
    return (
      <Map
          google={this.props.google}
          initialCenter={{lat: 40,lng: -88}}
          zoom={15}
        >
          { customMarker ? 
            <MyOwnMarker /> : 
            <Marker position={{lat:40, lng:-88}}/>
          }
      </Map>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: (process.env.REACT_APP_GOOGLE_API_KEY)
})(MapContainer)
Метки: