Как сделать так, чтобы маркер всегда был в центре, когда карта движется? - PullRequest
Новая
       32

Как сделать так, чтобы маркер всегда был в центре, когда карта движется?

0 голосов
/ 12 мая 2019

Я использую компонент Reaction-Google-карты, чтобы сделать карту с одним маркером. Я сделал это, и он работает отлично, но проблема в том, что я хочу, чтобы маркер всегда был по центру.

Я провел исследование в Google и нашел несколько решений: одно с помощью API Google, но я не понимаю, как реализовать реагирование на google-maps, а второе - добавить фальшивый маркер над картой - что, мне кажется, не хорошее решение. 

import React from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker} from 'react-google-maps';

function Map() {
    return(
        <GoogleMap
                defaultZoom={13}
                defaultCenter={{lat:54.68916, lng:25.2798}}
        >
           <Marker 
                position={{lat:54.68916, lng:25.2798}}
                draggable={true}
                onDragEnd={(e) => markerDrop(e)}
           />
        </GoogleMap>
    );
}

function markerDrop(event){
    //get values of marker
    let lat = event.latLng.lat();
    let lng = event.latLng.lng();
    //insert values to forms
    document.getElementById('location_latitude').value = lat;
    document.getElementById('location_longitude').value = lng;
    return
}


const WrappedMap = withScriptjs(withGoogleMap(Map));



export default function PickLocation(){
    return(
        <div>
            <WrappedMap 
                googleMapURL={'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSy'}
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `400px` }} />}
                mapElement={<div style={{ height: `100%` }} />}
            />
        </div>
    )
}

В и результат должен быть похож на Uber Pick Up Map, где маркер находится в середине карты, а карта движется.

1 Ответ

1 голос
/ 15 мая 2019

Вот список изменений для сохранения маркера по центру при перемещении карты:

1) введите center состояние, чтобы сохранить положение маркера: 

const [center, setCenter] = useState(null);

2) при перемещении карты (через bounds_changed или drag прослушиватель событий) обновить текущий center: 

const handleBoundsChanged = () => {
    const mapCenter = refMap.current.getCenter(); //get map center
    setCenter(mapCenter);
};

где 

<GoogleMap 
   ref={refMap}
   onBoundsChanged={handleBoundsChanged} 
   ...
/>

3) маркер положения путем передачи center состояния: 

<Marker  position={center} />

Пример 

function Map() {
  const [center, setCenter] = useState({ lat: 54.68916, lng: 25.2798 });
  const refMap = useRef(null);

  const handleBoundsChanged = () => {
    const mapCenter = refMap.current.getCenter(); //get map center
    setCenter(mapCenter);
  };

  return (
    <GoogleMap
      ref={refMap}
      defaultZoom={13}
      defaultCenter={{ lat: 54.68916, lng: 25.2798 }}
      onBoundsChanged={useCallback(handleBoundsChanged)}
    >
      <Marker position={center} />
    </GoogleMap>
  );
}

Вот демонстрационная версия

Примечание: из-за использования Крючки Реактивная версия 16.8 или выше требуется

...