Bing 地图中带有行车路线的圆半径

Question

我目前正在开发一个使用 Bing 地图的网站。我正在使用 Bing 地图第 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);
    }

Answer 1

我相信您需要实际实施您的 DirectionsUpdated 事件。您的代码包含以下空函数：

directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', function () {} );

在路线加载完成之前，您不应该对地图进行任何操作。加载完成后，您可以执行以下操作：

1. 清除所有地图实体map.entities.clear();，这将删除所有以前的折线和多边形
2. 然后重置方向：directionsManager.resetDirections(); 以清除当前方向（否则您会看到附加的航点）。
3. 然后来自方向模块directionsManager.getAllWaypoints(); 的get all of the waypoints
4. 现在绘制三个圆圈。

你的问题是时间和正确的顺序之一。