Javascript 在地图中重新实例化地图对象时出现问题

我有一个可拖动的标记，它是用地址serach创建的，我需要围绕标记创建一个圆圈，每当我移动标记时删除该圆圈，当我停止移动标记时创建另一个圆圈。问题是：当我只进行一次搜索时，它不会出现任何问题，当我第二次搜索时，它会在新标记所在的位置创建一个新的圆圈，在我尝试移动标记或地图后，其他两个圆圈不知从何处创建，如果我在创建另外两个圆圈后移动标记，这两个圆分别指向第一个标记的起始坐标（现已删除）和同一第一个标记的最终坐标。 我怎样才能永远删除这些圆圈？我尝试过group.removeObject、group.removeAll以及delete circle、circle=null和circle=undefined，但都没有成功。 在第二次搜索后尝试移动地图或标记时，也会出现错误

Uncaught IllegalOperationError: H.map.Group#removeObject object not found

---

从我的角度来看，您从中获取了基本代码，对于您的案例，这样做会更好

代码的主要问题是，当您第二次调用函数AddDragableMarker时，将再次为map对象添加所有事件（dragstart、Dragen、drag），然后map对象将具有加倍（dragstart、Dragen、drag）功能

另一个问题是，每个圆都应该绑定到自己的标记上，以区分它们的删除/添加或可见/不可见

我在这里为您提供了重新编写的代码（也就是说）：

---

从我的角度来看，您从中获取了基本代码，对于您的案例，这样做会更好

代码的主要问题是，当您第二次调用函数AddDragableMarker时，将再次为map对象添加所有事件（dragstart、Dragen、drag），然后map对象将具有加倍（dragstart、Dragen、drag）功能

另一个问题是，每个圆都应该绑定到自己的标记上，以区分它们的删除/添加或可见/不可见

我在这里为您提供了重新编写的代码（也就是说）：

function addDraggableMarker(map, behavior) {
  group.removeAll();

  let marker = new H.map.Marker(
    { lat: latit, lng: longi },
    {
      volatility: true,
    }
  );
  marker.draggable = true;
  group.addObject(marker);
  circle = new H.map.Circle({ lat: lati, lng: long }, raioF);
  group.addObject(circle);

  map.addEventListener(
    "dragstart",
    function (ev) {
      group.removeObject(circle);
      let target = ev.target,
        pointer = ev.currentPointer;
      if (target instanceof H.map.Marker) {
        let targetPosition = map.geoToScreen(target.getGeometry());
        target["offset"] = new H.math.Point(
          pointer.viewportX - targetPosition.x,
          pointer.viewportY - targetPosition.y
        );
        behavior.disable();
      }
    },
    false
  );

  map.addEventListener(
    "dragend",
    function (ev) {
      let target = ev.target;
      if (target instanceof H.map.Marker) {
        behavior.enable();
        latit = marker.b.lat;
        longi = marker.b.lng;
      }
      circle = new H.map.Circle({ lat: lati, lng: long }, raioF);
      group.addObject(circle);
    },
    false
  );

  map.addEventListener(
    "drag",
    function (ev) {
      let target = ev.target,
        pointer = ev.currentPointer;
      if (target instanceof H.map.Marker) {
        target.setGeometry(
          map.screenToGeo(
            pointer.viewportX - target["offset"].x,
            pointer.viewportY - target["offset"].y
          )
        );
      }
    },
    false
  );
}

function addDraggableMarker(map, behavior, coord, isEventsExist) {
  //group.removeAll();
  let raioF = 10000;

  let marker = new H.map.Marker(
    coord,
    {
      volatility: true,
    }
  );
  marker.draggable = true;  
  let circle = new H.map.Circle(coord, raioF, {volatility: true,});
  marker.setData({myCircle: circle}); //to distinguish circles which belogs to different markkers
  group.addObject(circle);
  group.addObject(marker);
  
  if(isEventsExist) return; //we need to add such events (dragstart, dragend, drag) for map object only once!

  map.addEventListener(
    "dragstart",
    function (ev) {
      let target = ev.target,
        pointer = ev.currentPointer;
      if (target instanceof H.map.Marker) {
        behavior.disable();
        target.getData().myCircle.setVisibility(false); // maybe better to use visibilty instead of removeObject/addObject ? 
        //group.removeObject(target.getData().myCircle);
        let targetPosition = map.geoToScreen(target.getGeometry());
        target["offset"] = new H.math.Point(
          pointer.viewportX - targetPosition.x,
          pointer.viewportY - targetPosition.y
        );
      }
    },
    false
  );

  map.addEventListener(
    "dragend",
    function (ev) {
      let target = ev.target;
      if (target instanceof H.map.Marker) {
        target.getData().myCircle.setCenter(target.getGeometry());
        //group.addObject(target.getData().myCircle);
        target.getData().myCircle.setVisibility(true);
        behavior.enable();
      }
    },
    false
  );

  map.addEventListener(
    "drag",
    function (ev) {
      let target = ev.target,
        pointer = ev.currentPointer;
      if (target instanceof H.map.Marker) {
        target.setGeometry(
          map.screenToGeo(
            pointer.viewportX - target["offset"].x,
            pointer.viewportY - target["offset"].y
          )
        );
      }
    },
    false
  );
}

/**
 * Moves the map to display over Berlin
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function moveMapToBerlin(map){
  map.setCenter({lat:52.5159, lng:13.3777});
  map.setZoom(7);
}

/**
 * Boilerplate map initialization code starts below:
 */

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map,{
  center: {lat:50, lng:5},
  zoom: 4,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);

var group = new H.map.Group();

// Now use the map as required...
window.onload = function () {
  moveMapToBerlin(map);
  map.addObject(group);
  addDraggableMarker(map, behavior, {lat:52.5159, lng:13.3777});
  addDraggableMarker(map, behavior, {lat:52, lng:13}, true);
}