无法使用图书馆传单移动我的标记答案

【问题标题】：Not able to move my marker using the library leaflet无法使用图书馆传单移动我的标记
【发布时间】：2021-02-19 23:43:13
【问题描述】：

我正在使用传单库处理 react.js，我希望在单击地图时移动标记而不添加新标记。这是我的代码：

import React from "react";
import {
  MapContainer,
  TileLayer,
  useMapEvents,
  MapConsumer
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import icon from "./constants";
import "./styles.css";

export default function App() {
  function MyComponent() {
    const map = useMapEvents({
      click: (e) => {
        const { lat, lng } = e.latlng;
        L.marker([lat, lng], { icon }).addTo(map);
      }
    });
    return null;
  }

  return (
    <MapContainer
      center={[50.5, 30.5]}
      zoom={13}
      style={{ height: "100vh" }}
      // whenReady={(map) => {
      //   console.log(map);
      //   map.target.on("click", function (e) {
      //     const { lat, lng } = e.latlng;
      //     L.marker([lat, lng], { icon }).addTo(map.target);
      //   });
      // }}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <MapConsumer>
        {(map) => {
          console.log("map center:", map.getCenter());
          map.on("click", function (e) {
            const { lat, lng } = e.latlng;
            L.marker([lat, lng], { icon }).addTo(map);
          });
          return null;
        }}
      </MapConsumer>
    </MapContainer>
  );
}

你可以在那里找到我的代码：my code

你能帮帮我吗？

非常感谢！

【问题讨论】：

标签： javascript reactjs leaflet react-leaflet

【解决方案1】：

是的，这可以做到。您可以设置现有标记的纬度，而不是每次都创建新标记：

<MapConsumer>
  {(map) => {
    let marker;
    map.on("click", function (e) {
      const { lat, lng } = e.latlng;
      if (marker) {
        marker.setLatLng([lat, lng]);
      } else {
        marker = L.marker([lat, lng], { icon }).addTo(map);
      }
    });
    return null;
  }}
</MapConsumer>

Working codesandbox

【讨论】：

【解决方案2】：

根据文档，这是标记的预期行为：

draggable Boolean false 标记是否可拖动鼠标/触摸与否。

意思：

L.marker([lat, lng], { icon, draggable: "true" }).addTo(map);

将使标记成为一个可拖动的

为防止地图点击时出现多个标记，您可以考虑使用solution proposed in another answer 或使用once 而不是on：

表现与 on(...) 一样，除了监听器只会被触发一次并且然后删除。

最后一个例子

 <MapContainer center={[50.5, 30.5]} zoom={13} style={{ height: "100vh" }}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <MapConsumer>
        {(map) => {
          map.once("click", function (e) {
            const { lat, lng } = e.latlng;
            L.marker([lat, lng], { icon, draggable: "true" }).addTo(map);
          });
          return null;
        }}
      </MapConsumer>
 </MapContainer>

Live demo

【讨论】：