Изменение цвета выбранного полигона на google-maps-реагировать - PullRequest
Новая
       22

Изменение цвета выбранного полигона на google-maps-реагировать

0 голосов
/ 21 ноября 2018

Я использую google-maps-реакции и пытаюсь изменить цвет наложенного многоугольника при его выборе.Полигоны также являются частью google-maps-реакции.

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

Код выглядит следующим образом: 

setColor = (selected, index) => {
      if (selected) {
          return "blue" //Even when blue is returned, no color change is visible
      } else {
          return "red"
      }
  }



render() {
    return (
        <Polygon
          paths={this.props.paths}
          onClick={() => this.handleClick()}
          strokeColor="#2A2A57"
          strokeOpacity={0.8}
          strokeWeight={2} 
          fillColor = {this.setColor(this.state.isSelected, this.state.index)}
          fillOpacity={0.35}
          {...this.props}
        />
      )
    }

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Похоже это google-maps-react дизайн библиотеки , только изменение paths реквизита заставляет Polygon перерисовать .

Следующий подход можно обновить Свойства многоугольника (например, fillColor):

1) Получить экземпляр объекта Google Maps Polygon через атрибут ref : 

 <Polygon
          ref={this.polygonRef}
          onClick={this.handleClick}
          paths={triangleCoords}
 />

2) Обновление свойств полигона с помощью Polygon.setOptions функции : 

handleClick = e =>{
   this.setPolygonOptions({fillColor: "green"});
}

, где 

setPolygonOptions = (options) => {
   this.polygonRef.current.polygon.setOptions(options);
};

Демо

Обновление

Другой вариант - получить доступ к экземпляру Polygon и изменить его свойства, как показано ниже.После щелчка на объекте многоугольника его экземпляр передается через параметр second события click: 

handleClick = (props,polygon,e) => {
    polygon.setOptions({ fillColor: "#ff00ff"});
};

Demo 2

0 голосов
/ 21 ноября 2018

Сделайте это ... 

  <Polygon
      paths={this.props.paths}
      onClick={() => this.handleClick()}
      options={{ strokeOpacity: 0.8, strokeColor: "#2A2A57", fillColor:"#000"}}
      {...this.props}
    />

Вы хотите передать параметры стиля в API Карт Google через prop.options.

...