Question

我尝试在同一页面上创建多个地图，每个地图都有不同的运输路线。

我已经能够迭代地创建多个Google地图，但我无法在每个地图中显示不同的方向。

我创建了许多包含地图的div，并为其提供了ID map-canvas1，map-canvas2，map-canvas3等等。使用以下功能创建地图后，我将如何在每个地图中显示不同的运输路线？使用现在的代码，任何地图中都不会出现任何方向（尽管每个地图都会显示）。

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var coordinates;

function initialize(){

    for (var i = 0; i < arrayOfObjects.length; i++){

        var directionsDisplay = new google.maps.DirectionsRenderer();       

        var latitude = arrayOfObjects[i].latitude;
        var longitude = arrayOfObjects[i].longitude;

        coordinates = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: 15,       
            center: coordinates
        };

        var numString = i.toString();
        var thisMapID = "map-canvas" + numString;

        map = new google.maps.Map(document.getElementById(thisMapID), mapOptions);
        directionsDisplay.setMap(map);

        calcRoute();
    };
}

var startingLocation = new google.maps.LatLng(40.768211, -73.957721);

function calcRoute(){

    var request = {
        origin: startingLocation,
        destination: coordinates,
        travelMode: google.maps.TravelMode.TRANSIT
    };

    directionsService.route(request, function(response, status){
        if(status == google.maps.DirectionsStatus.OK){
            directionsDisplay.setDirections(response);          
        }
    }); 
}

Answer 1

需要将唯一的DirectionsRenederer与每张地图相关联。请注意，DirectionsService受限于配额和速率限制，如果您有许多这些地图，则必须检查返回状态并正确处理OVER_QUERY_LIMIT错误（您可能希望一般处理错误，因此服务会告诉您< em>为什么某些地图没有显示路线。）

working example (with 2 maps)

var directionsDisplay = [];
var directionsService = [];
var map = [];
var coordinates;

function initialize(){

    for (var i = 0; i < arrayOfObjects.length; i++){
        directionsService[i] = new google.maps.DirectionsService();

        directionsDisplay[i] = new google.maps.DirectionsRenderer();       

        var latitude = arrayOfObjects[i].latitude;
        var longitude = arrayOfObjects[i].longitude;

        coordinates = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: 15,       
            center: coordinates
        };

        var numString = i.toString();
        var thisMapID = "map-canvas" + numString;

        map[i] = new google.maps.Map(document.getElementById(thisMapID), mapOptions);
        directionsDisplay[i].setMap(map[i]);

        calcRoute(i);
    };
}

var startingLocation = new google.maps.LatLng(40.768211, -73.957721);

function calcRoute(index){
    var request = {
        origin: startingLocation,
        destination: map[index].getCenter(),
        travelMode: google.maps.TravelMode.TRANSIT
    };

    directionsService[index].route(request, function(response, status){
        if(status == google.maps.DirectionsStatus.OK){
            directionsDisplay[index].setDirections(response);          
        } else { alert("Directions request failed: " + status); }
    }); 
}

您可以使用Google Maps JavaScript API v3在同一页面上显示多个地图和路线吗？

1 个答案: