时间戳

首页 > 解决方案 > 反应中的单个自定义标记谷歌地图 API

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

问题描述

我一直在使用 Google Maps & Places API，并使用反应钩子成功地让它工作，以允许用户放置标记、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>

任何帮助，将不胜感激！

标签： javascriptreactjsgoogle-mapsonclick

解决方案

要实现您的用例，您需要访问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;

推荐阅读