Google maps api 3 路由器不工作

使用“单击”功能创建多段线。我正在使用RouteBox实用程序沿此多段线创建一组长方体。我已经用一个警报框测试了Drawbox的功能，它正在工作，但是没有出现。我想我错过了什么。有什么建议吗

(function() {
    window.onload = function() {

        var places = [];
        var path;
        var string = "";
        var para = document.getElementById("para");
        var map = null;
        var boxpolys = null;
        var directions = null;
        var routeBoxer = null;
        var distance = null;


        //create reference to div tag in HTML file
        var mapDiv = document.getElementById('map');

        // option properties of map

        var options = {

                center: new google.maps.LatLng(-20.2796, 57.5074),
                zoom : 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        // create map object
        var map = new google.maps.Map(mapDiv, options);


        // create MVC array to populate on click event
        var route = new google.maps.MVCArray();

        var polyline = new google.maps.Polyline({
            path: route,
            strokeColor: '#ff0000',
            strokeOpacity: 0.6,
            strokeWeight: 5
        });

        polyline.setMap(map);

        // create click event,attach to map and populate route array

        google.maps.event.addListener(map,'click', function(e) {

            // create reference to polyline object
             path = polyline.getPath();

             // add the position clicked on map to MVC array
            path.push(e.latLng);

        });


        $('#compute').click(function() {

                routeBoxer = new RouteBoxer();
                distance = parseFloat((0.1) * 1.609344);
                var boxes = routeBoxer.box(polyline,distance);
                drawBoxes(boxes);

        });     


    };

})();

 // Draw the array of boxes as polylines on the map
    function drawBoxes(boxes) {
        alert('working in function');

      boxpolys = new Array(boxes.length);
      for (var i = 0; i < boxes.length; i++) {

        boxpolys[i] = new google.maps.Rectangle({
          bounds: boxes[i],
          fillOpacity: 0,
          strokeOpacity: 1.0,
          strokeColor: '#000000',
          strokeWeight: 3,
          map: map
        });
      }
    }

（函数（）{
window.onload=函数（）{
var位置=[]；
var路径；
var字符串=”；
var para=document.getElementById（“para”）；
var-map=null；
var-boxpolys=null；
var方向=null；
var routeBoxer=null；
var距离=null；
//在HTML文件中创建对div标记的引用
var mapDiv=document.getElementById（'map'）；
//地图的选项属性
变量选项={
中心：新google.maps.LatLng（-20.2796,57.5074），
缩放：16，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//创建地图对象
var map=new google.maps.map（mapDiv，options）；
//创建MVC阵列以填充单击事件
var route=new google.maps.MVCArray（）；
var polyline=新的google.maps.polyline({
路径：路线，
strokeColor:“#ff0000”，
笔划不透明度：0.6，
冲程重量：5
});
多段线.setMap（map）；
//创建单击事件、附着到地图并填充管线阵列
google.maps.event.addListener（映射，'click'，函数（e）{
//创建对多段线对象的引用
路径=多段线。getPath（）；
//将地图上单击的位置添加到MVC阵列
推送路径（如板条）；
});
$（“#计算”）。单击（函数（）{
routeBoxer=新的routeBoxer（）；
距离=浮动（（0.1）*1.609344）；
变量框=路由框（多段线，距离）；
抽屉(盒);；
});     
};
})();
//将长方体阵列绘制为地图上的多段线
功能抽丝盒（盒）{
警报（“在功能中工作”）；
boxpolys=新数组（box.length）；
对于（变量i=0；i

您的

var映射需要是全局的，否则它在
函数绘图框（）中不可见。

将声明移到函数外部

var map;

(function() {
    window.onload = function() {

        var places = [];
        var path;
        var string = "";
        var para = document.getElementById("para");

        var boxpolys = null;
        var directions = null;
        var routeBoxer = null;
        var distance = null;


        //create reference to div tag in HTML file
        var mapDiv = document.getElementById('map');

        // option properties of map

        var options = {

                center: new google.maps.LatLng(-20.2796, 57.5074),
                zoom : 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        // create map object -
        //============== no 'var' keyword here ======================
        map = new google.maps.Map(mapDiv, options);

        ... etc ...

请发布一个链接到一个演示该问题的实时页面。由于某些原因，我无法解决这个问题identify@WafiFarreedun您能描述一下您为解决此问题所做的更改吗？我也有同样的问题，我想了解代码出了什么问题。