0

ポリラインは、クリック機能を使用して作成されます。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
        });
      }
    }
4

1 に答える 1

0

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 ...
于 2012-11-08T09:55:14.193 に答える