Question

使用单击功能创建折线。我正在使用RouteBoxer实用程序沿此折线创建一组框。我已经使用警告框测试了drawBoxes函数，它正在工作，但框没有显示。我想我错过了什么。有什么提示吗？

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

Answer 1

您的var map必须是全球性的，否则在function drawBoxes()内不可见。

将声明移到函数外部。

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 ...

RouteBoxer无法正常工作

1 个答案: