3

我使用 tomchentw react-google-maps 创建了谷歌地图。默认情况下，标记图标显示红色标记图标，但每当用户单击标记图标时，它应该变为灰色标记图标，并且还会增加标记图标的大小。我怎样才能改变它？

<Marker
  onClick={this.MarkerClicked.bind(this,house._id)} 
  icon={{url: "/images/mapRed2.png"}} 
  position={{lat: house.location.lat, lng: house.location.lng}}
/>

单击我的标记图标时，它应该更改其图标和大小。

4

1 回答 1

2

该示例演示了单击按钮后如何更新标记图标和大小： 

const Map = compose(
    withScriptjs,
    withGoogleMap,
    withStateHandlers(() => ({
        iconUrl: "http://maps.google.com/mapfiles/ms/icons/red.png",
        iconSize: new google.maps.Size(32, 32)
    }), {
            onMarkerClick: () => () => ({
                iconUrl: "http://maps.google.com/mapfiles/ms/icons/blue.png",
                iconSize: new google.maps.Size(64, 64)
            })
        })
)(props =>
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: -34.397, lng: 150.644 }}>
        <Marker onClick={props.onMarkerClick}
            icon={{ url: props.iconUrl, scaledSize: props.iconSize }}
            position={{ lat: -34.397, lng: 150.644 }} />

    </GoogleMap>
)

关键点：

  • icon.scaledSize属性用于调整标记图标的大小

  • iconUrl一旦触发事件，iconSize状态属性就会传递给Marker 组件onClick

演示

于 2018-03-31T10:32:25.750 回答