google-map-react可拖动标记- onChildMouseMove在移动设备上不起作用

Question

这在计算机上运行得很好，但我只是尝试在移动设备上测试它，没有一个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;

Answer 1

我也可以在我这一端复制你的问题。我使用了你的代码，'onChildMouse‘功能在电脑上运行，但使用我手机上的浏览器，我不能拖动标记，我创建的警报也没有触发。

我有一种不同的方式来使用google-map-react制作可拖动的标记/圆。我使用<GoogleMapReact >( Google -map-onGoogleApiLoaded and yesIWantToUseGoogleMapApiInternals )的反应参数来访问Google Maps对象。然后，我将其传递给使用Google Maps对象创建marker或circle的函数，然后将每个对象的draggable参数设置为true。我测试了一下，它可以在手机的浏览器中使用。

下面是一个sample code和代码片段：

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;