反应中的单个自定义标记谷歌地图 API

Question

我一直在使用 Google Maps & Places API 并成功地使用 react hooks 使其工作，以允许用户放置标记、onClick 信息窗口、自动完成位置搜索和地理定位。

但是，我需要的是 onClick 它只会添加一个标记，每次用户单击新坐标时都会更改位置。 不像目前那样在每次点击时添加多个标记。

代码如下：

const [markers, setMarkers] = useState([]);
const [selected, setSelected] = useState(null);


  const onMapClick = useCallback((event) => {
    setMarkers((current) => [
      ...current,
      {
        lat: event.latLng.lat(),
        lng: event.latLng.lng(),
        time: new Date(),
      },
    ]);
  }, []);

...

return (

 <GoogleMap
        mapContainerStyle={mapContainerStyle}
        zoom={13}
        center={center}
        onClick={onMapClick}
        onLoad={onMapLoad}
      >
        {markers.map((marker) => (
          <Marker
            key={marker.time.toISOString()}
            position={{ lat: marker.lat, lng: marker.lng }}
            icon={{
              url: "/crane-pin.svg",
              scaledSize: new window.google.maps.Size(40, 40),
              origin: new window.google.maps.Point(0, 0),
              anchor: new window.google.maps.Point(15, 15),
            }}
            onClick={() => {
              setSelected(marker);
            }}
          />
        ))}

...

  </GoogleMap>

任何帮助，将不胜感激！

Answer 1

要实现您的用例，您需要访问marker object并使用setPosition方法将标记的位置更改为地图中单击的坐标。

你在使用任何谷歌地图反应库吗？ 这是一个示例 reactjs 代码，它在不使用任何反应库的情况下实现了这一点。 下面的代码片段：

import React, { Component } from "react";
import { render } from "react-dom";
import Map from "./Map";
import "./style.css";

class App extends Component {
  render() {
    return (
      <div id="container">
        <Map
          id="myMap"
          options={{
            center: { lat: 37.769, lng: -122.446 },
            zoom: 12,
          }}
          onMapLoad={(map) => {
            let marker = new google.maps.Marker({
              position: { lat: 37.769, lng: -122.446 },
              map: map,
            });

            //Changing Marker position for clicked coordinate
            map.addListener("click", (event) => {
              marker.setPosition(event.latLng);
            });
          }}
        />
      </div>
    );
  }
}

export default App;