我试图弄清楚如何在拖动标记时检索标记位置。我发现了这个:Drag marker event with callback providing lat/long?
并在我的应用程序上实现,如下所示:
export class MapContainer extends React.Component {
onMarkerDragEnd = evt => {
console.log(evt);
};
render() {
const style = {
width: "100%",
height: "300px"
};
let lat = this.props.lat;
let lng = this.props.lng;
return (
<Map
google={this.props.google}
style={style}
initialCenter={{
lat: lat,
lng: lng
}}
zoom={14}
>
<Marker
onClick={this.onMarkerClick}
draggable={true}
onDragend={this.onMarkerDragEnd}
name={"Current location"}
/>
</Map>
);
}
}
onMarkerDragEnd 函数记录一个 evt 对象,如下所示:
{onClick: undefined, draggable: true, onDragend: ƒ, name:
"Currentlocation", map: Zf, …}
draggable: true
google:{maps: {…}}
map: Zf {gm_bindings_: {…}, __gm: uf, gm_accessors_: {…}, mapTypeId:
"roadmap", center: _.K, …}
mapCenter:{lat: "37.122024", lng: "25.234458"}
name:"Current location"
onClick:undefined
onDragend:ƒ (evt)
__proto__:Object
我尝试做这样的事情:
onMarkerDragEnd = (evt) => {
console.log(evt.google.maps.Marker.getPosition().lat());
}
但它返回无法获取未定义的位置
那么我如何从返回的事件中获取标记的位置? 感谢您的帮助!
最佳答案
onDragend
事件监听器函数的第三个参数包含拖动后标记的坐标。
示例
class MapContainer extends React.Component {
state = {
markers: [
{
name: "Current position",
position: {
lat: 37.77,
lng: -122.42
}
}
]
};
onMarkerDragEnd = (coord, index) => {
const { latLng } = coord;
const lat = latLng.lat();
const lng = latLng.lng();
this.setState(prevState => {
const markers = [...this.state.markers];
markers[index] = { ...markers[index], position: { lat, lng } };
return { markers };
});
};
render() {
return (
<Map
google={this.props.google}
style={{
width: "100%",
height: "300px"
}}
zoom={14}
>
{this.state.markers.map((marker, index) => (
<Marker
position={marker.position}
draggable={true}
onDragend={(t, map, coord) => this.onMarkerDragEnd(coord, index)}
name={marker.name}
/>
))}
</Map>
);
}
}
关于javascript - google-maps-react 获取拖动端的标记位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51495060/