首页 > 解决方案 > Leaflet.JS 试图扩展 Circle 类

问题描述

代码:

var map = L.map("map").setView([51.505, -0.09], 13);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

var polygon = L.polygon([
  [54.069122, -4.769456],
  [54.069223, -4.768973],
  [54.069465, -4.769123],
  [54.069368, -4.769606],
]).addTo(map);

var DraggableCircle = L.Circle.extend({
  initialize: function (name, options) {
    this.name = name;
    L.setOptions(this, options);
    this.setRadius(2);
    this.setLatLng([54.069223, -4.768973]);
    this.on({
      mousedown: function () {
        map.on("mousemove", this.moveObject);
      },
      click: function () {
        map.off("mousemove", this.moveObject);
        map.dragging.enable();
      },
    });
    this.addTo(map);
  },

  moveObject: function (event) {
    L.Circle.prototype.setLatLng.call(this, event.latlng);
    map.dragging.disable();
  },
});

var testCircle = new DraggableCircle("Draggable", {
  color: "red",
  fillColor: "#f03",
  fillOpacity: 1,
  interactive: true,
});

我正在尝试扩展 Leaflet.JS Circle 类来制作我自己的可拖动圆形对象类。在大多数情况下,我能够创建构造函数并正确使用 .extend() 方法。但是,当我定义我的 moveObject 方法时,它在鼠标移动时设置圆的纬度和经度,浏览器控制台说 redraw() 方法是未定义的。我不确定为什么会发生这种情况,如果有人可以帮助我解释 JavaScript 面向原型意味着什么,我将不胜感激。

这是我的错误:

在此处输入图像描述

标签: javascript

解决方案


推荐阅读