Question

我目前正在开发一个使用Bing Maps的网站。我正在使用Bing Maps Version 7.我创建了一个功能齐全的驾驶路线功能。其效果类似于 this：

用户右键点击地图，无所谓。然后启动上下文菜单，用户可以在两个选项之间进行选择。这是： Allign Start 和 Allign 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 () {} );

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

清除所有先前折线和多边形的地图实体map.entities.clear();
然后重置路线：directionsManager.resetDirections();以清除当前路线（否则您会看到附加的路标）。
然后来自路线模块directionsManager.getAllWaypoints();

get all of the waypoints

现在绘制你的三个圆圈。

您的问题是时间和正确的排序问题。

圆形半径与Bing地图中的行车路线

1 个答案: