Как настроить маркер react-google-map с локальным png?

Недавно я пытался внедрить tomchentw/react-google-maps, но я не могу понять, как сократить значок маркера, по умолчанию он показывает красный значок, он работал нормально, но когда я пытаюсь передать значок реквизита, маркер не показывался.

вот мой код:

/* global google */
import React, { Component } from 'react';
import { MarkerWithLabel } from 'react-google- 
maps/lib/components/addons/MarkerWithLabel';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from 'react-google-maps';
import { compose, withProps, withHandlers } from 'recompose';


const MapWithAMarkerClusterer = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC3naz5xCZtPlOeMo38InY3GFr4k8A2LO0&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `100%` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={11}
    defaultCenter={{ lat: 25.0391667, lng: 121.525 }}
  >
          <Marker
          position={{ lat: 25.0391667, lng: 121.525 }}
          icon={{
            url: 'assets/image2vector.svg',
            anchor: new google.maps.Point(5, 58),
          }}
        />   
  </GoogleMap>
);

class googleMap extends Component {

  render() {
    return (
      <MapWithAMarkerClusterer />
    )
  }
}

export default googleMap;

если я удалю реквизит значка, красный маркер вернется. Но я действительно хочу использовать свою собственную локальную иконку. Как я могу это сделать?


reactjs react-google-maps
person ThomasH.Allen    schedule 07.10.2018    source источник
comment
Эта проблема связана с этой ссылкой, она работает для меня. stackoverflow.com/a/51151686/6687953   -  person Nassim    schedule 03.02.2021
comment
Эта проблема связана с этой ссылкой, она работает для меня. stackoverflow.com/a/51151686/6687953   -  person Nassim    schedule 03.02.2021

Ответы (1)


arrow_upward
10
arrow_downward

Вам нужно либо импортировать, либо использовать require непосредственно в рендере для рендеринга изображения.

Ниже приведены два способа рендеринга изображений в React.

    import vector from 'assets/image2vector.svg';


    icon={{
        url: vector,
        anchor: new google.maps.Point(5, 58),
      }}

Или используйте require напрямую

   icon={{
        url: require('assets/image2vector.svg'),
        anchor: new google.maps.Point(5, 58),
      }}
person Hemadri Dasari    schedule 07.10.2018
comment
@ Thomash.Allen Добро пожаловать :) пожалуйста, проголосуйте и примите ответ. - person Hemadri Dasari; 07.10.2018