在此处重新实例化地图对象的问题

如何解决在此处重新实例化地图对象的问题

我有一个使用地址搜索创建的可拖动标记，我需要在标记周围创建一个圆圈，每当移动标记时都删除该圆圈，而当我停止移动标记时创建另一个圆圈。问题是：当我只进行一次搜索时，它就不会出现单个问题；当我再次进行搜索时，它会在新标记所在的位置创建一个新的圆，并在我尝试移动标记或地图后，另外两个圆是无处创建的，如果在创建了另外两个圆之后移动了标记，则这两个圆将到达第一个标记的起始坐标（现已删除）和同一第一个标记的最终坐标。 如何永久删除这些圈子？我已经尝试了group.removeObject，group.removeAll以及删除圈子，circle = null和circle = undefined，但是这些都不起作用。 在第二次搜索后尝试移动地图或标记时，也会出现错误。

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

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,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
  );
}

解决方法

您从this example获取了基本代码，从我的角度来看，最好为您的情况选择this example code。

您的代码的主要问题是，当您第二次调用函数addDraggableMarker时，将同时为地图对象添加所有事件（dragstart，dragend，drag），并且第二次又将地图对象加倍（dragstart，dragend，drag）功能

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

我在这里为您提供了返工的代码（也就是on JSFiddle）：

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",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,{lat:52.5159,lng:13.3777});
  addDraggableMarker(map,{lat:52,lng:13},true);
}