Leaflet.js:捕获类型错误:marker.getLatLng 不是函数

问题描述 投票:0回答:0

我正在努力绘制使用 OSM 和使用节点作为后端的传单的方法。我正在尝试使用传单绘制插件的矩形功能选择一个边界框(https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html)在前端我有 leaflet2.html 在脚本标签中有以下内容:

  const mymap = L.map("map");

    const drawnItems = new L.FeatureGroup();
    mymap.addLayer(drawnItems);

    const drawControl = new L.Control.Draw({
      edit: {
        featureGroup: drawnItems,
      },
      draw: {
        polyline: false,
        circle: false,
        circlemarker: false,
        marker: {
          icon: new L.Icon.Default(),
        },
      },
    });
    mymap.addControl(drawControl);


  async function getGeoJSONArr() {
    const response = await fetch("http://localhost:3000/data");
    const jsonArr = await response.json();
    console.log("jsonARR", jsonArr);
    const reversedCoords = jsonArr[0].slice().reverse();
    console.log(reversedCoords);
    return { jsonArr: jsonArr, reversedCoords: reversedCoords };
  }

  (async function buildMap(params) {
    const o = await getGeoJSONArr();
    console.log(o);
    const polyline1 = o.jsonArr;
    const reversedCoords = o.reversedCoords;
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      maxZoom: 18,
    }).addTo(mymap);

    mymap.setView(reversedCoords, 13);



    // Add a polyline
    console.log("polyline1 ", polyline1);
    const reversedCoordinates = polyline1.map((coord) => coord.reverse());

    L.polyline(reversedCoordinates, { color: "blue" }).addTo(mymap);

 
  })();

    mymap.on(L.Draw.Event.CREATED, (event) => {
      const marker = event.layer;
      const latlng = marker.getLatLng();
      console.log(`Selected point: ${latlng.lat}, ${latlng.lng}`);
    });

我可以选择一个矩形,但是标题中的错误和控制台中没有边界框。我该如何解决这个问题?

javascript node.js leaflet gis openstreetmap
© www.soinside.com 2019 - 2024. All rights reserved.