reactjs - 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 以不同的方式制作可拖动的标记/圆圈。我用了 onGoogleApiLoaded and yesIWantToUseGoogleMapApiInternals <GoogleMapReact > 的参数(google-map-react) 访问谷歌地图对象。然后我将它传递给一个创建 marker 的函数或 circle使用 Google Maps 对象然后设置 draggable每个对象的参数为真。我进行了测试，这在移动设备的浏览器中有效。

这是一个 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;