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

本文介绍了您可以使用Google Maps JavaScript API v3在同一页面上显示包含路线的多个地图吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在同一个页面上创建多个地图，每个地图中都有不同的运输方向。

我已经能够迭代地创建多个Google地图，但是我无法获得各自出现的不同方向。

我创建了一些div来存放地图，并为它们分配了ID map-canvas1 ， map-canvas2 ， map-canvas3 ...等等。使用下面的函数创建地图后，我将如何在每个地图中显示不同的路线方向？使用现在的代码，任何地图都不会出现方向（尽管每个地图都显示出来）。

  var directionsDisplay; 
 var directionsService = new google.maps.DirectionsService（）; 
 var map; 
 var coordinate; 
 
函数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）; 
 
函数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）; 
} 
}）;

解决方案

https://developers.google.com/maps/documentation/javascript/reference#DirectionsRenderer =nofollow> DirectionsRenederer 需要与每张地图相关联。请注意DirectionsService受限于配额和速率限制，如果您有很多这些地图，则必须检查返回状态并适当处理OVER_QUERY_LIMIT错误（您可能需要处理一般错误，以便服务会告诉您为什么某些地图不显示路线）。

I'm trying to create multiple maps on the same page with different transit directions in each one.

I've been able to iteratively create multiple Google maps, but I can't get different directions to appear in each.

I’ve created a number of divs that hold the maps and gave them IDs map-canvas1, map-canvas2, map-canvas3…etc. After creating the maps with the below function, how would I then show different transit directions in each one? With the code as it is now, no directions appear in any of the maps (although each of the maps do show up).

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);          
        }
    }); 
}

解决方案

A unique DirectionsRenederer needs to be associated with each map. Note that the DirectionsService is subject to a quota and rate limits, if you have lots of these maps you will have to check the return status and handle OVER_QUERY_LIMIT errors appropriately (you may want to handle errors in general, so the service will tell you why some maps don't show a route).

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在同一页面上显示包含路线的多个地图吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！