Как получить позицию маркера на драгенде в React (google-map-react) - PullRequest
Новая
       5

Как получить позицию маркера на драгенде в React (google-map-react)

1 голос
/ 17 июня 2020

Здравствуйте, ребята, как мне получить координаты (долгота и широта) события dragend, когда я помещаю маркер на карту? Я использую google-map-react для рендеринга карты в настоящее время. Спасибо

Это компонент маркера, который я сейчас хочу визуализировать: 

import React, { useRef, useState } from "react";
import GoogleMapReact from "google-map-react";

const Marker = ({ text }) => (
  <div style={{ width: "20px", height: "20px", backgroundColor: "red" }}>
    {text}
  </div>
);

Я использую это компонент для рендеринга карты. 

const Address = () => {
  //Setup Map Marker
  const [Markers, setMarker] = useState({
    name: "Current position",
    position: {
      lat: 37.77,
      lng: -122.42,
    },
  });
  const renderMarkers = (map, maps) => {
    console.log(maps);
    console.log(map);
    let marker = new maps.Marker({
      position: Markers.position,
      zoom: Markers.zoom,
      draggable: true,
      dragend: (e) => console.log(e),
      map,
      title: "Hello World!",
    });
    return marker;
  };

  return (
    <div className="Address">
      {/* Delivery Section  */}
      <div className="delivery active">
        deleviery
        <div style={{ height: "50vh", width: "100%" }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: "xxxxxxxx" }}
            defaultCenter={Markers.position}
            defaultZoom={11}
            yesIWantToUseGoogleMapApiInternals={true}
            onGoogleApiLoaded={({ map, maps }) => renderMarkers(map, maps)}
            // onChildMouseUp={onCircleInteraction3}
            // onDragEnd={(e) => onMarkerDragEnd(e.nativeEvent)}
            // onClick = {changeMarkerPosition}
          ></GoogleMapReact>
        </div>
      </div>
    </div>
  );
};
export default Address;

Ответы [ 2 ]

0 голосов
/ 18 июня 2020

Я обнаружил, что мне помогли 3 пакета (react- google-maps / response-geocode / response-google-autocomplete) Надеюсь, это поможет любому, кому нужна помощь в использовании карт Google в react js

import React from 'react';

импортировать {withGoogleMap, GoogleMap, withScript js, InfoWindow, Marker} из "react- google-maps"; импортировать геокод из "реагировать-геокодировать"; импортировать автозаполнение из 'response-google-autocomplete';

const {MarkerWithLabel} = require ("react-google-maps / lib / components / addons / MarkerWithLabel");

Geocode.setApiKey («хххххххх»); Geocode.enableDebug ();

class LocationSearchModal расширяет React.Component {

state = {
    address: '',
    city: '',
    area: '',
    state: '',
    zoom: 15,
    height: 200,
    mapPosition: {
        lat: 0,
        lng: 0,
    },
    markerPosition: {
        lat: 0,
        lng: 0,
    },
    Building:'',
    pincode:''
}


componentDidMount() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
            this.setState({
                mapPosition: {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                },
                markerPosition: {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                }
            },
                () => {
                    Geocode.fromLatLng(position.coords.latitude, position.coords.longitude).then(
                        response => {
                            console.log(response)
                            const address = response.results[0].formatted_address,
                                addressArray = response.results[0].address_components,
                                city = this.getCity(addressArray),
                                area = this.getArea(addressArray),
                                state = this.getState(addressArray);
                            console.log('city', city, area, state);
                            this.setState({
                                address: (address) ? address : '',
                                area: (area) ? area : '',
                                city: (city) ? city : '',
                                state: (state) ? state : '',
                            })
                        },
                        error => {
                            console.error(error);
                        }
                    );

                })
        });
    } else {
        console.error("Geolocation is not supported by this browser!");
    }
};

// shouldComponentUpdate(nextProps, nextState, nextContext) {
//     if (
//         this.state.markerPosition.lat !== this.state.center.lat ||
//         this.state.address !== nextState.address ||
//         this.state.city !== nextState.city ||
//         this.state.area !== nextState.area ||
//         this.state.state !== nextState.state
//     ) {
//         return true
//     } else if (this.state.mapPosition.lat === nextState.mapPosition.lat) {
//         return false
//     }
// }

getCity = (addressArray) => {
    let city = '';
    for (let i = 0; i < addressArray.length; i++) {
        if (addressArray[i].types[0] && 'administrative_area_level_2' === addressArray[i].types[0]) {
            city = addressArray[i].long_name;
            return city;
        }
    }
};

getArea = (addressArray) => {
    let area = '';
    for (let i = 0; i < addressArray.length; i++) {
        if (addressArray[i].types[0]) {
            for (let j = 0; j < addressArray[i].types.length; j++) {
                if ('sublocality_level_1' === addressArray[i].types[j] || 'locality' === addressArray[i].types[j]) {
                    area = addressArray[i].long_name;
                    return area;
                }
            }
        }
    }
};

getState = (addressArray) => {
    let state = '';
    for (let i = 0; i < addressArray.length; i++) {
        for (let i = 0; i < addressArray.length; i++) {
            if (addressArray[i].types[0] && 'administrative_area_level_1' === addressArray[i].types[0]) {
                state = addressArray[i].long_name;
                return state;
            }
        }
    }
};

onChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
    console.log('Changed ');
};

onInfoWindowClose = (event) => { };

onMarkerDragEnd = (event) => {
    let newLat = event.latLng.lat(),
        newLng = event.latLng.lng();

    Geocode.fromLatLng(newLat, newLng).then(
        response => {
            const address = response.results[0].formatted_address,
                addressArray = response.results[0].address_components,
                city = this.getCity(addressArray),
                area = this.getArea(addressArray),
                state = this.getState(addressArray);
            this.setState({
                address: (address) ? address : '',
                area: (area) ? area : '',
                city: (city) ? city : '',
                state: (state) ? state : '',
                markerPosition: {
                    lat: newLat,
                    lng: newLng
                },
                mapPosition: {
                    lat: newLat,
                    lng: newLng
                },
            })
        },
        error => {
            console.error(error);
        }
    );
};

onPlaceSelected = (place) => {
    console.log('place Selected')
    const address = place.formatted_address,
        addressArray = place.address_components,
        city = this.getCity(addressArray),
        area = this.getArea(addressArray),
        state = this.getState(addressArray),
        latValue = place.geometry.location.lat(),
        lngValue = place.geometry.location.lng();

    console.log('latvalue', latValue)
    console.log('lngValue', lngValue)

    // Set these values in the state.
    this.setState({
        address: (address) ? address : '',
        area: (area) ? area : '',
        city: (city) ? city : '',
        state: (state) ? state : '',
        markerPosition: {
            lat: latValue,
            lng: lngValue
        },
        mapPosition: {
            lat: latValue,
            lng: lngValue
        },
    })
};

// const AsyncMap = compose(
//     withProps({
//         googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyALVjLwOIM1gf7EzdJJVmWLKdLP-yZGTcw&v=3.exp&libraries=geometry,drawing,places",
//         loadingElement: <div style={{ height: `100%` }} />,
//         containerElement: <div style={{ height: `400px` }} />,
//         mapElement: <div style={{ height: `100%` }} />,
//     }),
//     withScriptjs,
//     withGoogleMap
// )((props) =>
//     <GoogleMap

render() {
    const AsyncMap = withScriptjs(
        withGoogleMap(
            props => (
                <GoogleMap
                    defaultZoom={this.state.zoom}
                    defaultCenter={{ lat: this.state.mapPosition.lat, lng: this.state.mapPosition.lng }}
                >
                    {/* InfoWindow on top of marker */}

                    {/*Marker*/}
                    <Marker
                        google={this.props.google}
                        name={'Dolores park'}
                        draggable={true}
                        onDragEnd={this.onMarkerDragEnd}
                        position={{ lat: this.state.markerPosition.lat, lng: this.state.markerPosition.lng }}
                    />
                    <InfoWindow
                        onClose={this.onInfoWindowClose}
                        position={{ lat: (this.state.markerPosition.lat + 0.0018), lng: this.state.markerPosition.lng }}
                    >
                        <div>
                            <span style={{ padding: 0, margin: 0 }}>{this.state.address}</span>
                        </div>
                    </InfoWindow>
                    <Marker />

                    {/* <MarkerWithLabel
                        position={{ lat: -34.397, lng: 150.644 }}
                        labelAnchor={new google.maps.Point(0, 0)}
                        labelStyle={{ backgroundColor: "yellow", fontSize: "32px", padding: "16px" }}
                    >
                        <div>Hello There!</div>
                    </MarkerWithLabel> */}


                    {/* For Auto complete Search Box */}
                    <Autocomplete
                        style={{
                            width: '100%',
                            height: '40px',
                            paddingLeft: '16px',
                            marginTop: '2px',
                            marginBottom: '2rem'
                        }}
                        onPlaceSelected={this.onPlaceSelected}
                        types={['(regions)']}
                    />
                </GoogleMap>
            )
        )
    );

    return (
        <div>
        <AsyncMap
                googleMapURL="https://maps.googleapis.com/maps/api/js?key=xxxxx&libraries=places"
                loadingElement={
                    <div style={{ height: `100%` }} />
                }
                containerElement={
                    <div style={{ height: this.state.height }} />
                }
                mapElement={
                    <div style={{ height: `100%` }} />
                }
            />
            <div className='row mt-5 p-2'>
                <div className="form-group col-12">
                    <label htmlFor="">Address</label>
                    <input type="text" name="address" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.address }/>
                </div>
                <div className="form-group col-12 col-md-6">
                    <label htmlFor="">City</label>
                    <input type="text" name="city" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.city }/>
                </div>
                <div className="form-group col-12 col-md-6">
                    <label htmlFor="">Area</label>
                    <input type="text" name="area" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.area }/>
                </div>
                <div className="form-group col-12 col-md-6">
                    <label htmlFor="">State</label>
                    <input type="text" name="state" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.state }/>
                </div>
                <div className="form-group col-12 col-md-6">
                    <label htmlFor="">Building</label>
                    <input type="text" name="Building" className="form-control" onChange={ this.onChange } value={ this.state.Building }/>
                </div>
                <div className="form-group col-12 col-md-6">
                    <label htmlFor="">pincode</label>
                    <input type="text" name="pincode" className="form-control" onChange={ this.onChange } value={ this.state.pincode }/>
                </div>
                <div className="form-group d-none">
                    <input type="text" name="city" className="form-control" onChange={ this.props.getData(this.state) } readOnly="readOnly" value={ this.state.mapPosition.lng }/>
                </div>
            </div>
        </div>
    )
}

}

экспорт LocationSearchModal по умолчанию;

0 голосов
/ 17 июня 2020

marker.latitude, marker.longitude см. Следующий пример: 

<GoogleMap defaultZoom={8} defaultCenter={{ lat: 29.5, lng: -95 }}>
      {props.markers.map(marker => {
        const onClick = props.onClick.bind(this, marker)
        return (
          <Marker
            key={marker.id}
            onClick={onClick}
            position={{ lat: marker.latitude, lng: marker.longitude }}
          >
            ....
          </Marker>
        )
      })}
    </GoogleMap>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...