在tomchentw react-google-maps中更改引脚颜色?

时间:2018-06-05 15:04:50

标签: javascript reactjs google-maps 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;
    }

2 个答案:

答案 0 :(得分:1)

@Aonan Li

是的,这就是我最终做的事情,我使用了自定义图像(基本上是一个不同颜色的图钉)。感谢您的链接,它有一些非常有用的信息!

这就是我的代码现在的样子:

>  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从自定义切换为默认标记!

答案 1 :(得分:0)

这可能不是您所需要的,但请先查看此链接。

Google Map icons with VisualRefresh

我找不到可以让您更改默认图标颜色的属性。但是,您始终可以自己提供自定义图像。

希望可以提供帮助。