react-google-maps标记点击事件
react-google-maps标记点击事件
提问于 2017-11-19 22:38:05
我使用的是react-google-maps文档中发布的集群地图的股票代码。我试图通过为标记添加一个单击事件来扩展代码，该事件将从API中获取标记URL，然后调用window.location来更改页面。
下面是从我的API返回的一个标记的示例：
{
id: 1,
name: "Oxford",
slug: "oxford",
lat: 51.752021,
lng: -1.257726,
}我已经向标记添加了一个事件onMarkerClick，并且该方法可以正确调用。我硬编码了window.location，然后它被调用了，我只是不知道如何获得slug的值。
我假设我必须以不同的方式存储slug值，这与我在下面的示例中的做法不同。我是新手，所以我可能遗漏了一些非常明显的东西。
import React from 'react'
const fetch = require("isomorphic-fetch");
const { compose, withProps, withHandlers } = require("recompose");
const {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker
} = require("react-google-maps");
const { MarkerClusterer } = require("react-google-maps/lib/components/addons/MarkerClusterer");
const MapWithAMarkerClusterer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyCvakAjEUpqfnucJu-CoClBD1CtTKZUGxQ&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: 'calc(100vh - 56px)' }} />,
containerElement: <div style={{ height: 'calc(100vh - 56px)' }} />,
mapElement: <div style={{ height: 'calc(100vh - 56px)' }} />,
}),
withHandlers({
onMarkerClustererClick: () => (markerClusterer) => {
console.log('Clicked a cluster')
},
onMarkerClick: () => (marker) => {
// link to post view page
//
//
//
//
//
console.log('Go to the marker post page')
window.location = '/post/oxford';
}
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
defaultZoom={3}
defaultCenter={{ lat: 12.2637937, lng: 75.947508 }}
>
<MarkerClusterer
onClick={props.onMarkerClustererClick}
averageCenter
enableRetinaIcons
gridSize={60}
>
{props.markers.map(marker => (
<Marker
onClick={props.onMarkerClick}
key={marker.id}
position={{ lat: marker.lat, lng: marker.lng }}
slug={marker.slug}
/>
))}
</MarkerClusterer>
</GoogleMap>
);
class TestMap extends React.PureComponent {
componentWillMount() {
this.setState({ markers: [] })
}
componentDidMount() {
const url = '/api/posts';
fetch(url)
.then(res => res.json())
.then(data => {
this.setState({ markers: data });
});
}
render() {
return (
<MapWithAMarkerClusterer markers={this.state.markers} />
)
}
}
export default TestMap回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-12 03:43:20
您可以为标记创建自定义组件，并通过其他参数进行标识，例如id
import React from 'react';
import {Marker} from 'react-google-maps';
const CustomMarker = (props) => {
const {id} = props;
const onMarkerClick = (evt) => {
console.log(id);
};
return (
<Marker
onClick={onMarkerClick}
{...props}
/>
);
};
export default CustomMarker;Stack Overflow用户
发布于 2017-12-03 19:36:54
在本例中
<Marker
onClick={props.onMarkerClick}
key={marker.id}
position={{ lat: marker.lat, lng: marker.lng }}
slug={marker.slug}
/>
onMarkerClick: () => (marker) => { //<- event object, not a marker object!
//..
}一个特定的Google Maps event对象将传递给onMarkerClick事件处理程序，而不是marker对象。
您可以使用.bind将marker对象作为参数传递，如下所示：
<Marker
key={marker.photo_id}
position={{ lat: marker.latitude, lng: marker.longitude }}
onClick={props.onMarkerClick.bind(this,marker)}
/>然后给出marker对象的结构：
{
id: 1,
name: "Oxford",
slug: "oxford",
lat: 51.752021,
lng: -1.257726,
}onMarkerClick事件可以像这样初始化：
onMarkerClick: () => (marker) => {
window.location = '/post/' + marker.slug;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47378069
复制相关文章
相似问题
腾讯云开发者
