圆半径与驾驶方向在必应地图

我目前正在开发一个使用必应地图的网站。我用的是必应地图7版。我创建了一个功能齐全的驾驶指示功能。

用户在地图上右键，在哪里不重要。然后弹出一个上下文菜单，用户可以在其中选择两个选项。即:Align Start和Align Finish。

正如你可能理解的那样，这些函数在用户右键单击的位置上创建了一个路径点。此外，半径圆在各自的路径点上对齐。起始和结束路径点都是可拖动的/可移动的，这意味着用户可以移动路径点。问题是，当用户移动其中一个路径点时，半径圆也不会移动，这很奇怪，因为我还没有为此创建一个函数。我不认为这很难做到，但我不知道如何得到移动路径点的新位置。我在张贴我的代码。所以我确实需要一些帮助来制作这个"RadiusCircleMove"。

这是我的Javascript代码:

var map = null;
var directionsManager;
var directionsErrorEventObj;
var directionsUpdatedEventObj;
var startPosition;
var checkpointPosition;
var finishPosition;
var popuplat;
var popuplon;
var waypointType;
var startcircle;
var checkpointcircle;
var finishcircle;
var startcirclelat;
var startcirclelon;
var checkpointcirclelat;
var checkpointcirclelon;
var finishcirclelat;
var finishcirclelon;
$(document).ready(function () {
    //this one line will disable the right mouse click menu
    $(document)[0].oncontextmenu = function () { return false; }
    GetMap();
});
function GetMap() {
    map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: "Enter Bing Key Here", zoom: 4, center: new Microsoft.Maps.Location(45, -100) });
    Microsoft.Maps.registerModule("BMv7.AdvancedShapes", "BMv7.AdvancedShapes.min.js");
    Microsoft.Maps.loadModule("BMv7.AdvancedShapes");
    //map.AttachEvent("onclick", ShowPopupMenu);
    Microsoft.Maps.Events.addHandler(map, 'click', RemovePopupMenu);
    Microsoft.Maps.Events.addHandler(map, 'rightclick', ShowPopupMenu);
}
function ShowPopupMenu(e) {
    var point = new Microsoft.Maps.Point(e.getX(), e.getY());
    popuplat = e.target.tryPixelToLocation(point).latitude
    popuplon = e.target.tryPixelToLocation(point).longitude
    var menu = document.getElementById('popupmenu');
    menu.style.display = 'block'; //Showing the menu
    menu.style.left = e.pageX + "px"; //Positioning the menu
    menu.style.top = e.pageY + "px";
}
function RemovePopupMenu() {
    document.getElementById("popupmenu").style.display = 'none';
}
function createDirectionsManager() {
    var displayMessage;
    if (!directionsManager) {
        directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
        //displayMessage = 'Directions Module loaded'n';
        //displayMessage += 'Directions Manager loaded';
    }
    //alert(displayMessage);
    directionsManager.resetDirections();
    directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', function () {} );
}
function createDrivingRoute() {
        if (!directionsManager) { createDirectionsManager(); }
        directionsManager.resetDirections();
        // Set Route Mode to driving
            directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
            if (waypointType == "start") {
                addDefaultPushpin();
                startPosition = new Microsoft.Maps.Directions.Waypoint({ location: new Microsoft.Maps.Location(popuplat, popuplon) });
                startcirclelat = popuplat;
                startcirclelon = popuplon;
            }
            if (waypointType == "checkpoint") {
                addDefaultPushpin();
                checkpointPosition = new Microsoft.Maps.Directions.Waypoint({ location: new Microsoft.Maps.Location(popuplat, popuplon) });
                checkpointcirclelat = popuplat;
                checkpointcirclelon = popuplon;
            }
            if (waypointType == "finish") {
                finishPosition = new Microsoft.Maps.Directions.Waypoint({ location: new Microsoft.Maps.Location(popuplat, popuplon) });
                finishcirclelat = popuplat;
                finishcirclelon = popuplon;
                directionsManager.addWaypoint(startPosition);
                directionsManager.addWaypoint(checkpointPosition);
                directionsManager.addWaypoint(finishPosition);
                directionsManager.calculateDirections();
                deletePushpin();
                CreateStartCircle();
                CreateCheckpointCircle();
                CreateFinishCircle();
            }
            // Set the element in which the itinerary will be rendered
            directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
            //alert('Calculating directions...');

}
function createDirections() {
    if (!directionsManager) {
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createDrivingRoute });
    }
    else {
        createDrivingRoute();
    }
}
function AddStartPosition() {
    waypointType = "start";
    createDirections();
    RemovePopupMenu();
}
function AddCheckpointPosition() {
    waypointType = "checkpoint";
    createDirections();
    RemovePopupMenu();
}
function AddFinishPosition() {
    waypointType = "finish";
    createDirections();
    RemovePopupMenu();
}
    function addDefaultPushpin() {
        var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(popuplat, popuplon));
        map.entities.push(pushpin);
    }
    function deletePushpin() {
        for (var i = map.entities.getLength() - 1; i >= 0; i--) {
            var pushpin = map.entities.get(i);
            if (pushpin instanceof Microsoft.Maps.Pushpin) {
                map.entities.removeAt(i);
            };
        }
    }
    function CreateStartCircle() {
        startcircle = DecStartCircle();
        map.entities.push(startcircle);
    }
    function CreateCheckpointCircle() {
        checkpointcircle = DecCheckpointCircle();
        map.entities.push(checkpointcircle);
    }
    function CreateFinishCircle() {
        finishcircle = DecFinishCircle();
        map.entities.push(finishcircle);
    }
      /***** Start Circle ****/
    function DecStartCircle() {
        var polygonOptions = {
            fillColor: new Microsoft.Maps.Color(100, 0, 0, 255),
            strokeColor: new Microsoft.Maps.Color(100, 255, 0, 0)
        };
        return new BMv7.AdvanceShapes.Circle(new Microsoft.Maps.Location(startcirclelat, startcirclelon), 80000, polygonOptions);
    }
    /***** Checkpoint Circle ****/
    function DecCheckpointCircle() {
        var polygonOptions = {
            fillColor: new Microsoft.Maps.Color(100, 0, 0, 255),
            strokeColor: new Microsoft.Maps.Color(100, 255, 0, 0)
        };
        return new BMv7.AdvanceShapes.Circle(new Microsoft.Maps.Location(checkpointcirclelat, checkpointcirclelon), 80000, polygonOptions);
    }
    /***** Finish Circle ****/
    function DecFinishCircle() {
        var polygonOptions = {
            fillColor: new Microsoft.Maps.Color(100, 0, 0, 255),
            strokeColor: new Microsoft.Maps.Color(100, 255, 0, 0)
        };
        return new BMv7.AdvanceShapes.Circle(new Microsoft.Maps.Location(finishcirclelat, finishcirclelon), 80000, polygonOptions);
    }