Bing Maps v8 API-縮放級別以顯示路線和圖釘位置

Question

我正在使用Bing Maps v8 API。 我有一張顯示行駛路線的地圖，以及另一個位置的圖釘。 我需要縮小地圖以顯示航點位置和圖釘位置。 現在，我可以將地圖縮放到圖釘位置的航路點。

我不確定如何將兩者同時顯示在地圖上。 我知道我需要使用LocationRect類。

var searchManager;
var startingPoint = document.getElementById('startPoint').value;
var address = $("#addressLine").val();
var loc;
var patAddLoc;
var waypointLoc;
var pinsLocs = [];

// GET ROUTE BASED ON DIRECTION
function GetMap() {    
    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        //BING API KEY VIA AZURE
        credentials: 'X',
        zoom: 10,        
    });   

    // geocode patient address
    geocodeQuery(address);  

// look for patient address
function geocodeQuery(query) {
    //If search manager is not defined, load the search module.
    if (!searchManager) {
        //Create an instance of the search manager and call the geocodeQuery function again.
        Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
            searchManager = new Microsoft.Maps.Search.SearchManager(map);
            geocodeQuery(query);
        });
    } else {
    var searchRequest = {
        where: query,
        callback: function (r) {
            //Add the first result to the map and zoom into it.
            if (r && r.results && r.results.length > 0) {
                var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                // get patient address location
                patAddLoc = r.results[0].location;
                map.entities.push(pin);
                // add patient location to pushpin array
                pinsLocs.push(patAddLoc);
                // view is set with route location
                //map.setView({ bounds: r.results[0].bestView });     
            }

            // directions manager
            // addWaypoint
            Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function addWaypoint() {
                var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

                // if less than 2 point on the map
                if (directionsManager.getAllWaypoints().length < 2) {
                    directionsManager.clearAll();

                    var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('startPoint').value });
                    directionsManager.addWaypoint(startWaypoint);

                    var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('endPoint').value });
                    directionsManager.addWaypoint(endWaypoint);
                }

                // Insert a waypoint
                if (document.getElementById('wayPoints').value !== null) {
                    var addressList = JSON.parse(document.getElementById('wayPoints').value);
                    var arrayLength = addressList.length;

                    // insert waypoints from schedule
                    for (var i = 0; i < arrayLength; i++) {
                        //alert(addressList[i]);
                        var hvaddress = addressList[i];
                        var newWP = new Microsoft.Maps.Directions.Waypoint({ address: hvaddress });
                        directionsManager.addWaypoint(newWP, 1);
                    }
                }


                // Set the element in which the itinerary will be rendered - set autoupdatemapview to false to override autozoom to route
                directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel'), autoUpdateMapView: false });
                directionsManager.calculateDirections();

                var allWaypoints = directionsManager.getAllWaypoints();                    

                // add way point to pinsLocs array
                for (var i = 0; i < allWaypoints.length; i++) {
                    // returns nulls
                    alert(allWaypoints);
                    loc = allWaypoints[i].getLocation();
                    var showMeLoc = loc;
                    // showMeLoc = undefined.....?
                    alert(showMeLoc);                         
                    pinsLocs.push(loc);              
                }
                // only the address search location is added to the array, waypoint locations are null
                alert(pinsLocs);

                //Create a LocationRect from array of locations and set the map view.
                map.setView({
                    bounds: Microsoft.Maps.LocationRect.fromLocations(pinsLocs),
                    padding: 100 //Add a padding to buffer map to account for pushpin pixel dimensions
                });
            });
        },
        errorCallback: function (e) {
            //If there is an error, alert the user about it.
            alert("No results found.");
        }
    };
        //Make the geocode request.
        searchManager.geocode(searchRequest);
    }

}

}

更新-這里是有相同問題的人的有效代碼！

var searchManager;
var startingPoint = document.getElementById('startPoint').value;
var address = $("#addressLine").val();
var patAddLoc;


// GET ROUTE BASED ON DIRECTION
function GetMap() {    
    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        //BING API KEY VIA AZURE
        credentials: 'XXXXX',
        zoom: 10,        
    });   

    // geocode patient address
    geocodeQuery(address);  

    // look for patient address
    function geocodeQuery(query) {
        //If search manager is not defined, load the search module.
        if (!searchManager) {
            //Create an instance of the search manager and call the geocodeQuery function again.
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                searchManager = new Microsoft.Maps.Search.SearchManager(map);
                geocodeQuery(query);
            });
        } else {
        var searchRequest = {
            where: query,
            callback: function (r) {    
                //Add the first result to the map and zoom into it.
                if (r && r.results && r.results.length > 0) {
                    locs = [];
                    var pin = new Microsoft.Maps.Pushpin(r.results[0].location);

                    // get patient address location
                    patAddLoc = r.results[0].location;
                    map.entities.push(pin);

                    // add patient location to pushpin array
                    locs.push(r.results[0].location);

                    // view is set with route location
                    //map.setView({ bounds: r.results[0].bestView });     
                }

                // directions manager
                // addWaypoint
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function addWaypoint() {
                    var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

                    // if less than 2 point on the map
                    if (directionsManager.getAllWaypoints().length < 2) {
                        directionsManager.clearAll();

                        var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('startPoint').value });
                        directionsManager.addWaypoint(startWaypoint);

                        var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('endPoint').value });
                        directionsManager.addWaypoint(endWaypoint);
                    }

                    // Insert a waypoint
                    if (document.getElementById('wayPoints').value !== null) {
                        var addressList = JSON.parse(document.getElementById('wayPoints').value);
                        var arrayLength = addressList.length;

                        // insert waypoints from schedule
                        for (var i = 0; i < arrayLength; i++) {
                            //alert(addressList[i]);
                            var hvaddress = addressList[i];
                            var newWP = new Microsoft.Maps.Directions.Waypoint({ address: hvaddress });
                            directionsManager.addWaypoint(newWP, 1);
                        }
                    }                    

                    // Set the element in which the itinerary will be rendered - set autoupdatemapview to false to override autozoom to route
                    directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel'), autoUpdateMapView: false });

                    //Add event handlers to directions manager.
                    Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', directionsError);
                    Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);

                    // Calculate directions, which displays a route on the map
                    directionsManager.calculateDirections();

                    // get route boundaries
                    function directionsUpdated(e) {
                        //Get the current route index.
                        var routeIdx = directionsManager.getRequestOptions().routeIndex;
                        // get northeast bounding box corner
                        var bBoxNE = e.routeSummary[routeIdx].northEast;
                        locs.push(bBoxNE);
                        // get southwest bounding box corner
                        var bBoxSW = e.routeSummary[routeIdx].southWest;                       
                        locs.push(bBoxSW);   


                        //SET MAP VIEW
                        //Create a LocationRect from array of locations and set the map view.
                        map.setView({
                            bounds: Microsoft.Maps.LocationRect.fromLocations(locs),
                            padding: 50 //Add a padding to buffer map to account for pushpin pixel dimensions
                        });
                    }
                    function directionsError(e) {
                        alert('Error: ' + e.message + '\r\nResponse Code: ' + e.responseCode)
                    }   

                });                
            },
            errorCallback: function (e) {
                //If there is an error, alert the user about it.
                alert("No results found.");
            }
        };

            //Make the geocode request.
            searchManager.geocode(searchRequest);
        } 
    }
}

Answer 1

如果我理解正確，您是否希望查看整個路線和額外位置？

如何使用directionsManager.getCurrentRoute().routePath來獲取路線上的所有位置，然后使用LocationRect.fromLocations()來獲取一系列位置-在您的情況下，是上述所有位置加上其他位置。

請注意， calculateDirections和geocode異步的，因此您可能要處理對patAddLoc的依賴關系（例如，將路線代碼移至地理編碼回調中）。

參考：

1. https://msdn.microsoft.com/zh-CN/library/mt750375.aspx
2. https://msdn.microsoft.com/zh-CN/library/mt750645.aspx
3. https://msdn.microsoft.com/zh-CN/library/mt712644.aspx