Google отображает размер маркера с реакцией - PullRequest
Новая
       46

Google отображает размер маркера с реакцией

2 голосов
/ 25 октября 2019

В настоящее время я работаю над проектом google-maps, используя google-maps-реакции, и столкнулся с проблемой. Я использую реквизиты, чтобы получить значения моего маркера (lat, lng, значок маркера), но у меня возникают проблемы при изменении размера маркера. У меня остался огромный маркер, и я не могу этого изменить. У меня есть попытка передать размер как опора, но безуспешно.
Заранее благодарю за любую помощь.

Вот мой код:

MAPS.JS 

render() {
    /*--- initial code that i passed into props*/
     /*var icon = {
     url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png", // url
    scaledSize: new this.props.google.maps.Size(90, 42), // scaled size
    */
     }
 return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={4}
          initialCenter={this.props.center}
        >
          {this.props.places.map((place, i) => {
              //pass an array of markers as a child to the GoogleMap component and map over them
            return (
              <Marker
                onClick={this.onMarkerClick}
                key={place.id}
                place_={place}
                position={{ lat: place.lat, lng: place.lng }}
                icon={place.url}
                //Size={place.scaledSize} : Not working
              />
            );
          })}
          <InfoWindowEx
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
          >
            <div>
              <h3>{this.state.selectedPlace.name}</h3>
              <button
                type="button"
                onClick={this.showDetails.bind(this, this.state.selectedPlace)}
              >

                Show details
              </button>
            </div>
          </InfoWindowEx>
        </Map>
      </div>
    );

INDEX.JS 

import React from "react";
import ReactDOM from "react-dom";
import Map from "./Map";

import "./styles.css";

const data = [
  {
    name: "Hello",
    title: "Sydney",
    lat: -33.847927,
    lng: 150.6517938,
    id: 1,
    color: "blue",
    url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png",
    // scaledSize: Size(90, 42), // scaled size - Not working//
     },
  {

1 Ответ

0 голосов
/ 28 октября 2019

Параметр scaledSize должен быть добавлен к свойству icon вашего маркера вместе с параметром url в соответствии с документами библиотеки и документами Google .

Итак, если у вас есть этот объект, содержащий оба параметра: 

var icon = {
  url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png",
  scaledSize: new this.props.google.maps.Size(90, 42)
};

Передайте их обоим вместе свойству icon вашего маркера вместе как объект следующим образом: 

<Marker
  onClick={this.onMarkerClick}
  key={place.id}
  place_={place}
  position={{ lat: place.lat, lng: place.lng }}
  icon={icon}
/>

Я проверилваш код с вышеуказанными изменениями и ваш синий маркер отображаются правильно в указанном размере. Надеюсь, это поможет вам!

...