[英]google-map-react draggable marker - onChildMouseMove not working on mobile
这在计算机上运行良好,但我只是尝试在移动设备上对其进行测试,但没有识别任何onChildMouse
事件处理程序。 我试过寻找其他事件处理程序,但onChildMouseXXX
是我在此包中看到的唯一事件处理程序。 如何使可拖动标记工作? 是否有我可以使用的其他事件,或解决此问题的已知解决方法?
import React from "react"
import PropTypes from "prop-types"
import GoogleMapReact from 'google-map-react';
const Marker = () => <div className="markerCircle"></div>;
class DraggableMap extends React.Component {
constructor(props) {
super(props);
this.state = {
center: {
lat: 0,
lng: 0
},
zoom: 11,
lat: 0,
lng: 0,
draggable: true,
loaded: false
}
this.onChildMouseMove = this.onChildMouseMove.bind(this)
this.onChildMouseUp = this.onChildMouseUp.bind(this)
this.onChildMouseDown = this.onChildMouseDown.bind(this)
}
componentDidMount() {
this.setState({
center: {
lat: this.props.lat,
lng: this.props.lng,
},
lat: this.props.lat,
lng: this.props.lng,
loaded: true
})
}
componentDidUpdate() {
if(this.props.lat != this.state.lat) {
this.setState({
center: {
lat: this.props.lat,
lng: this.props.lng,
},
lat: this.props.lat,
lng: this.props.lng,
loaded: true
})
}
}
onChildMouseDown(){
console.log('mouse down')
// set map no draggable
this.setState({
draggable: false,
});
}
onChildMouseUp(){
console.log('mouse up')
//set map draggable again
this.setState({
draggable: true,
});
}
onChildMouseMove(hoverKey, childProps, mouse){
console.log('move mouse')
// Change item data with new coordinates
// you need set here own store and update function
this.setState({
lat: mouse.lat,
lng: mouse.lng
}, () => this.props.updateLatLng(this.state.lat, this.state.lng))
}
render() {
if(!this.state.loaded) {
return null
}
return (
// Important! Always set the container height explicitly
<div style={{ height: '100%', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'yesItIsMyRealKeyHere' }}
defaultCenter={this.state.center}
center={{lat: this.state.lat, lng: this.state.lng}}
defaultZoom={this.state.zoom}
draggable={this.state.draggable}
onChildMouseDown={() => this.onChildMouseDown()}
onChildMouseUp={() => this.onChildMouseUp()}
onChildMouseMove={(key, childProps, mouse) => this.onChildMouseMove(key, childProps, mouse)}
>
<Marker
key={'id'}
item={'n'}
lat={this.state.lat}
lng={this.state.lng}
/>
</GoogleMapReact>
</div>
);
}
}
export default DraggableMap;
我也可以在最后复制您的问题。 我使用了您的代码,并且“onChildMouse”功能可在计算机上运行,但使用手机中的浏览器时,我无法拖动标记,并且未触发我创建的警报。
我有一种使用 google-map-react 制作可拖动标记/圆圈的不同方法。 我用onGoogleApiLoaded
和yesIWantToUseGoogleMapApiInternals
的参数<GoogleMapReact >
谷歌地图反应)来访问谷歌地图对象。 然后我将它传递给一个使用 Google Maps 对象创建标记或圆圈的函数,然后将每个对象的draggable
参数设置为 true。 我测试过,这在移动浏览器中有效。
这是一个示例代码和代码片段:
import React, { Component } from "react";
import GoogleMapReact from "google-map-react";
class GoogleMaps extends Component {
loadMap = (map, maps) => {
const cityCircle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: { lat: 40.756795, lng: -73.954298 },
radius: 10000,
draggable: true
});
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: "YOUR_API_KEY_HERE" }}
defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
defaultZoom={10}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => this.loadMap(map, maps)}
/>
</div>
);
}
}
export default GoogleMaps;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.