Question

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

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

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

Answer 1

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

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事件后的组件

Demo

用户点击标记图标

1 个答案: