Блог

Главная - Вопросы по программированию - @react-google-карты/api с помощью window.google.maps вызывает ошибку типа — как я могу правильно вызвать google maps API?

@react-google-карты/api с помощью window.google.maps вызывает ошибку типа — как я могу правильно вызвать google maps API?

#reactjs #google-maps #react-google-maps

Вопрос:

Я использую @react-google-maps/api пакет. Все работает хорошо. Пример рабочего кода:

 import React, { Component } from 'react';
import TemplatePage from '../templates/TemplatePage';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

const lat = 25.52
const lng = 52.25


export class Home extends Component {

  render() {
    return (
      <TemplatePage>

        <LoadScript
          googleMapsApiKey="mykey"
        >
          <GoogleMap
            mapContainerStyle={containerStyle}
            center={center}
            zoom={10}
          >

            <Marker
              position={{
                lat,
                lng
              }}
            >
            </Marker>
          </GoogleMap>
        </LoadScript>

      </TemplatePage>
    )
  }
}


export default Home;

До того момента, пока я не попытаюсь получить пользовательский значок для маркера:

 import React, { Component } from 'react';
import TemplatePage from '../templates/TemplatePage';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import markerStation from'../../img/marker-station.png';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

const lat = 25.52
const lng = 52.25


export class Home extends Component {

  render() {
    return (
      <TemplatePage>

        <LoadScript
          googleMapsApiKey="mykey"
        >
          <GoogleMap
            mapContainerStyle={containerStyle}
            center={center}
            zoom={10}
          >

            <Marker
              position={{
                lat,
                lng
              }}
              icon={
                new window.google.maps.MarkerImage(
                  markerStation,
                  null, /* size is determined at runtime */
                  null, /* origin is 0,0 */
                  null, /* anchor is bottom center of the scaled image */
                  new window.google.maps.Size(48, 48)
                )
              }
            >
            </Marker>
          </GoogleMap>
        </LoadScript>

      </TemplatePage>
    )
  }
}


export default Home;

Короче говоря, добавление этого фрагмента кода в компонент маркера:

               icon={
                new window.google.maps.MarkerImage(
                  markerStation,
                  null, /* size is determined at runtime */
                  null, /* origin is 0,0 */
                  null, /* anchor is bottom center of the scaled image */
                  new window.google.maps.Size(48, 48)
                )
              }

Приведет к следующей ошибке:

 TypeError: Cannot read properties of undefined (reading 'maps')

Это явно указывает на тот факт, что я вызываю window.google.maps.Маркерное изображение

Мой вопрос в том, как мне правильно использовать вызов API Google?

Комментарии:

1. Возможно, потребуется установить @types/google.maps ?

2. Примеры пользовательских значков маркеров можно найти в react-google-maps-api-docs.netlify.app/#маркер

3. @jpoehnelt Спасибо за ответ. Я пробовал, но это не решает проблему. Та же ошибка, что и раньше. Спасибо

4. @alpakyol Спасибо вам за ответ. Да, это правда, и я использую ее. Единственная часть, которая мне нужна и которой там нет, — это определение размера значка. Поэтому в настоящее время я использую его следующим образом: значок={ новое окно.google.карты. MarkerImage( markerCompetitor, нуль, /* размер определяется во время выполнения / нуль, / происхождения 0,0 / нуль, / якорь нижней части масштабируемого изображения */ новое окно.Гугл.карты.Размер(48, 48) ) }, К сожалению, я не вижу, где я могу установить размер значков в документации.

5. Проверьте developers.google.com/maps/documentation/javascript/reference/… . Нет такого определения, как MarkerImage (вероятно, устаревшее в соответствии с моим поиском).

Метки: