Question

执行时我有函数将从值数组中绘制地图上的路线。我正在使用 Google地图 * 路线渲染 *。根据我所看到的研究，要在地图上渲染多条路线，我需要为数组中的每条路线创建路线渲染。

我正在尝试为数组中的每个路径创建一个Directions Render，所以我决定用变量'i'连接变量的名称。这不起作用。

我将 Directions Render 对象创建为一个数组但是当访问数组时我得到了一个错误 - TypeError：无法将undefined转换为object directionsService [i] = new google.maps.DirectionsService（）;

如果我创建单独的路线渲染 ，例如。 DirectionsRender0，DirectionsRender1，DirectionsRender2 ...... 这个工作正常，但是会有一个实例，我不确定会有多少 Directions Render 。

Under是我的代码示例：

function plotRoutes(){  

    var directionsDisplay = new Array();

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

    var rendererOptions = {
        map: map,
        preserveViewport:true
    }
    directionsService[i] = new google.maps.DirectionsService();

    var travelMode = google.maps.DirectionsTravelMode.DRIVING;  

    var request = {
        origin: startLoc[i],
        destination: endLoc[i],
        travelMode: travelMode
    };  
        directionsDisplay[i] = new google.maps.DirectionsRenderer(rendererOptions);

        directionsDisplay[i].setMap(map);

        directionsService.route(request, function(response, status) {
        //console.log(response);

        if (status == google.maps.DirectionsStatus.OK){
            console.log(response);
            directionsDisplay[i].setDirections(response);

            }

        });
    }

Answer 1

问题是所有的回调都共享相同的变量“i”，并且在每个回调中，“i”的值将是调用回调时的点数之一。

在单独的函数中创建回调，如下所示：

  function makeRouteCallback(disp) {
    return function(response, status) {
      console.log(response);
      disp.setDirections(response);
    };
  }

然后设置回调：

  directionsService.route(request, makeRouteCallback(directionsDisplay[i]));

确保API使用的实际回调函数将是数组的正确成员。在回调建立时评估对“i”的引用，而不是在实际调用时评估。此时，回调函数使用存储的副本（“disp”），它对每个回调都是私有的。

JavaScript动态变量命名

1 个答案: