有没有办法使用 google-map-react 从这个可拖动标记获取坐标?
Is there a way to get the coordinates from this draggable marker using google-map-react?
我制作了标记,因此它可以在地图上拖动。我正在尝试从标记中获取坐标,以便将它们保存到我的数据库中。
下面是代码,是否有一个函数可以在拖动标记时获取坐标。或者我应该使用另一个 google maps react 库。
import React, {Component, useCallback} from "react";
import GoogleMapReact from "google-map-react";
class Map extends Component {
loadMap = (map, maps) => {
let marker = new maps.Marker({
position: { lat: 40.856795, lng: -73.954298 },
map,
draggable: true,
});
};
render() {
return (
<div style={{ height: "400px", width: "100%" }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "key here" }}
defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
defaultZoom={10}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => this.loadMap(map, maps)}
>
</GoogleMapReact>
</div>
);
}
}
export default Map;
您正在使用 google api 作为标记,因此您可以使用 marker
docs。
具体来说,您应该使用 dragend
event
类似
handleDragEnd = (event) => {
console.log(event.latLng);
}
loadMap = (map, maps) => {
let marker = new maps.Marker({
position: { lat: 40.856795, lng: -73.954298 },
map,
draggable: true,
});
marker.addListener('dragend', this.handleDragEnd);
};
我制作了标记,因此它可以在地图上拖动。我正在尝试从标记中获取坐标,以便将它们保存到我的数据库中。 下面是代码,是否有一个函数可以在拖动标记时获取坐标。或者我应该使用另一个 google maps react 库。
import React, {Component, useCallback} from "react";
import GoogleMapReact from "google-map-react";
class Map extends Component {
loadMap = (map, maps) => {
let marker = new maps.Marker({
position: { lat: 40.856795, lng: -73.954298 },
map,
draggable: true,
});
};
render() {
return (
<div style={{ height: "400px", width: "100%" }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "key here" }}
defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
defaultZoom={10}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => this.loadMap(map, maps)}
>
</GoogleMapReact>
</div>
);
}
}
export default Map;
您正在使用 google api 作为标记,因此您可以使用 marker
docs。
具体来说,您应该使用 dragend
event
类似
handleDragEnd = (event) => {
console.log(event.latLng);
}
loadMap = (map, maps) => {
let marker = new maps.Marker({
position: { lat: 40.856795, lng: -73.954298 },
map,
draggable: true,
});
marker.addListener('dragend', this.handleDragEnd);
};