Изменить цвет булавки в Tomchentw React-Google-Maps?

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

это моя функция makeMarkers:

 makeMarkers=()=>{
     const marker=this.props.markers.map((marker,id)=>{
      return <Marker marker={marker} position={{lat:marker.lat, lng:marker.lng}} 
                      onClick={()=>this.props.onMarkerClick(marker)}
              >

                {marker.showWindow && (
                <InfoWindow>
                  <div>Something is there!</div>
                  </InfoWindow>)
                }      
              </Marker>
    })
        return marker;
    }

reactjs google-maps javascript react-google-maps
person tr4nc3    schedule 05.06.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

@ Аонан Ли

Да, в конечном итоге я так и поступил, я использовал собственное изображение (которое в основном представляет собой булавку другого цвета). Спасибо за ссылку, там есть очень полезная информация!

Вот как теперь выглядит мой код:

>  makeMarkers=()=>{
>     
>     const marker=this.props.markers.map((marker,id)=>{
>       return <Marker key={id} marker={marker} position={{lat:marker.lat, lng:marker.lng}} 
>                       onClick={()=>this.props.onMarkerClick(marker)}
>                       options={{icon:`${marker.icon}`}}
>               >
>                 
>                 {marker.showWindow && (
>                 <InfoWindow>
>                   <div>Something is there!</div>
>                   </InfoWindow>)
>                 }      
>               </Marker>
>     })
>         return marker;
>     }

Каждый маркер получает начальный собственный .png, и onClick I переключается с обычного на стандартный!

person tr4nc3    schedule 05.06.2018

arrow_upward
1
arrow_downward

Возможно, это не совсем то, что вам нужно, но сначала посмотрите эту ссылку.

Значки Google Map с VisualRefresh

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

Надеюсь, это поможет.

person Aonan Li    schedule 05.06.2018