当地图四处移动时，如何使标记始终居中? [英] How to make marker always centered when map is moving around?

问题描述

我正在使用react-google-maps组件制作带有一个标记的地图.我做到了，它运行正常，但是问题是我希望标记始终居中.

I am using react-google-maps component to make map with one marker. I did it and it is working perfectly, but the problem is that I want that marker will be always centered.

我曾经在Google上进行过研究，并找到了几种解决方案:一种是通过Google API实现的，但我不知道如何实现对Google Maps的反应，其次-在地图上添加假标记-我认为不是很好的解决方案.

I did research on google, and find out several solutions: one is by google API, but I don't get it how to implement to react-google-maps, and second - add fake marker over map - which I think isn't good solution.

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>
    )
}

和的结果必须与超级拾取地图相似，其中标记位于地图的中间，地图在四处移动.

At the and result have to be similar as uber pick up map, where marker is in the middle of the map, and map is moving around.

推荐答案

以下是使标记保持在地图移动中心的更改列表:

Here is the list of changes to keep marker centered on map move:

1)引入center状态以保持标记位置:

1) introduce center state to keep marker position:

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

2)在地图上移动(通过bounds_changed或drag事件监听器)更新当前center:

2) on map move (via bounds_changed or drag event listener ) update current center:

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

其中

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

3)通过传递center状态的位置标记:

3) position marker by passing center state:

<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>
  );
}

这是一个演示

注意:由于使用了 Hooks React版本16.8或更高版本，必填

Note: due to the usage of Hooks React version 16.8 or above is required

这篇关于当地图四处移动时，如何使标记始终居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！