gpt4 book ai didi

javascript - google-maps-react 获取拖动端的标记位置

转载 作者:行者123 更新时间:2023-12-03 13:28:47 27 4
gpt4 key购买 nike

我试图弄清楚如何在拖动标记时检索标记位置。我发现了这个: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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com