Блог

Это прекрасно работает на компьютере, но я только что попробовал протестировать его на мобильных устройствах, и ни один из обработчиков 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-map-react) для доступа к объекту Google Maps. Затем я передал его функции, которая создает маркер или круг, используя объект 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;