如何在用户单击标记图标时更改 Google 地图标记图标

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

如何在用户单击标记图标时更改 Google 地图标记图标

How to change Google Maps Marker icon when user clicked the marker icon

javascript

reactjs

react-google-maps