我使用 tomchentw react-google-maps 创建了 Google map 。默认情况下,标记图标显示红色标记图标,但每当用户单击标记图标时,它应该变为灰色标记图标并增加标记图标大小。我该如何更改它?
<Marker
onClick={this.MarkerClicked.bind(this,house._id)}
icon={{url: "/images/mapRed2.png"}}
position={{lat: house.location.lat, lng: house.location.lng}}
/>
当我的标记图标被点击时,它应该改变它的图标和大小。
最佳答案
该示例演示了如何在单击按钮后更新标记图标和大小:
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
事件
关于javascript - 用户单击标记图标时如何更改 Google map 标记图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49511040/