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

编程入门 行业动态 更新时间:2024-10-05 11:26:21

Leaflet.js:捕获类型错误:marker.getLatLng 不是<a href=https://www.elefans.com/category/jswz/34/1771370.html style=函数"/>

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

我正在努力绘制使用 OSM 和使用节点作为后端的传单的方法。我正在尝试使用传单绘制插件的矩形功能选择一个边界框(.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/{z}/{x}/{y}.png", {
      attribution:
        'Map data &copy; <a href="/">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}`);
    });

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

回答如下:

更多推荐

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

本文发布于:2024-05-30 15:27:29,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1770641.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:函数   错误   类型   js   Leaflet

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!