javascript - 如何在谷歌地图中心制作固定标记以使用react？

Question

我有使用 react-google-maps 的 React 应用程序。我希望它在用户移动 map 时将标记固定在 map 的中心。但就我而言，只要发生拖动事件， map 就会立即刷新。

父组件:

import React, { useState, useEffect } from 'react';
import Map from './Map';
export default function Parent() {
const [mapCenter, setMapCenter] = useState(undefined); 
    const [markerPosition, setMarkerPosition] = useState(undefined);
    useEffect(()=>navigator.geolocation.getCurrentPosition(position => 
        {
            setMapCenter({lat:position.coords.latitude, lng:position.coords.longitude})
            setMarkerPosition({lat:position.coords.latitude, lng:position.coords.longitude})
        }
        ),[])
 return(
        <div>
            { mapCenter && <Map mapCenter={mapCenter} setMapCenter={setMapCenter} markerPosition={markerPosition} setMarkerPosition={setMarkerPosition} />}

        </div>
    )
}

和 map 组件:

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

export default function Map(props) {

  let mapRef;
  let markerRef;
  const WrappedMap = withGoogleMap(() =>
    <GoogleMap ref={(ref) => mapRef = ref} center={props.mapCenter} zoom={16} onDrag={()=>{
      const newCenter = mapRef.getCenter().toJSON(); 
      props.setMarkerPosition(newCenter);
      props.setMapCenter(newCenter)
      }}>
      <Marker ref={(ref) => markerRef = ref } position={props.markerPosition} draggable={false}/>
    </GoogleMap>
  );

  return (
    <div style={{ height: "50vh", width: "50vh" }}>
      <WrappedMap
        loadingElement={<div style={{ height: "100%" }} />}
        containerElement={<div id="map" style={{ height: "100%" }} />}
        mapElement={<div style={{ height: "100%" }} />}
      />
    </div>
  )
}

我预计当用户拖动 map 时，父级的状态会更新并且标记会移动到新位置，但它并没有像我预期的那样工作。我在这里缺少什么？

Answer 1

为了实现您的用例，在您的父组件中，您需要使用 handleChangeCenter函数将设置你的中心和标记的新值然后你将传递一个 onChange调用 handleChangeCenter 的子组件的参数功能。

在您的子组件中，而不是 onDrag <GoogleMap/>的功能对象，您可以使用 onDragEnd和 onDragEnd , 你会调用 handleChange函数获取 map 在 dragEnd 上的当前中心坐标，并将新值传递给 onChange 的属性改变中心和标记的状态。

这是一个 sample code和下面的代码片段:

父类.js

import React, { useState, useEffect } from 'react';
import Map from './Map';
export default function Parent() {
const [mapCenter, setMapCenter] = useState(undefined); 
    const [markerPosition, setMarkerPosition] = useState(undefined);

    function handleChangeCenter(newValue) {
      setMapCenter(newValue);
      setMarkerPosition(newValue)
    }


    useEffect(()=>navigator.geolocation.getCurrentPosition(position => 
        {
            setMapCenter({lat:position.coords.latitude, lng:position.coords.longitude})
            setMarkerPosition({lat:position.coords.latitude, lng:position.coords.longitude})
        }
        ),[])
 return(
        <div>
            { mapCenter && <Map mapCenter={mapCenter}  markerPosition={markerPosition}  onChange={handleChangeCenter} />}

        </div>
    )
}

map .js

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

export default function Map(props) {
  let mapRef;
  function handleChange() {
    // Here, we invoke the callback with the new value
    const newCenter = mapRef.getCenter().toJSON();
    console.log(newCenter);
    props.onChange(newCenter);
  }

  const WrappedMap = withGoogleMap(() => (
    <GoogleMap
      ref={(ref) => (mapRef = ref)}
      center={props.mapCenter}
      zoom={16}
      onDragEnd={handleChange}
    >
      <Marker position={props.markerPosition} draggable={false} />
    </GoogleMap>
  ));

  return (
    <div style={{ height: '50vh', width: '50vh' }}>
      <WrappedMap
        loadingElement={<div style={{ height: '100%' }} />}
        containerElement={<div id="map" style={{ height: '100%' }} />}
        mapElement={<div style={{ height: '100%' }} />}
      />
    </div>
  );
}