反應中的單個自定義標記谷歌地圖 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;