2012-01-23 31 views
2

これはレールアプリのビューです。残念ながら私は修正できません( "キャッチされない構文エラー:予期しない入力の終了")。答えは簡単ですが、});を追加しても問題は解決しません。javascriptをキャッチする "予期しない入力の終了"

誰かが、私が何かを忘れてしまったのを忘れているかもしれないと思っていますか?

ありがとうございます! HAMLで

:エラーは、この次のチャンクの前にここに来て

- content_for :before_head do 
    = javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" 


- content_for :page_javascript do 
    = javascript_include_tag "http://www.mapnificent.net/media/api/1/mapnificent.js" 
    :javascript 
    var MAP, HEATMAP, DATAPOINTS; 
    var mapnificent, urbanDistance, positions = {}; 
    $(document).ready(function() { 
     DATAPOINTS = {}; 
     var myLatlng = new google.maps.LatLng(40.75297891717686, -73.93936157226562); 

     var myOptions = { 
      zoom: 12, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      disableDefaultUI: true, 
      scrollwheel: true, 
      draggable: true, 
      navigationControl: true, 
      mapTypeControl: false, 
      scaleControl: true, 
      disableDoubleClickZoom: false, 
      streetViewControl: false, 
      mapTypeControl: false, 
      overviewMapControlOptions: false, 
      styles: [ 
        { 
        featureType: "administrative", 
        elementType: "geometry", 
        stylers: [ 
         { visibility: "off" } 
        ] 
        },{ 
        featureType: "administrative.locality", 
        stylers: [ 
         { visibility: "on" } 
        ] 
        },{ 
        featureType: "transit.line", 
        stylers: [ 
         { visibility: "off" } 
        ] 
        },{ 
        elementType: "geometry", 
        stylers: [ 
         { saturation: -100 }, 
         { lightness: -100 }, 
         {gamma:0.24} 
        ] 
        },{ 
        featureType: "road.arterial", 
        elementType:"labels", 
        stylers: [ 
         { visibility: "simplified" }, 
      //  { saturation: -100 }, 
      //  {lightness:70}, 
      //  {hue: "#ffc243"} 
        ] 
        },{ 
        featureType: "road.highway", 
        elementType: "labels", 
        stylers: [ 
         { visibility: "simplified" }, 
      //  { saturation: -100 }, 
      //  {lightness:70}, 
      //  {gamma: 0}, 
        ] 
        },{ 
        featureType: "landscape", 
        elementType: "geometry", 
        stylers: [ 
         { lightness: 92 }, 
         { saturation: 20 }, 
         { hue: "#e2ded3" }, 
        ] 
        },{ 
        featureType: "road", 
        elementType: "geometry", 
        stylers: [ 
         { visibility: "simplified"}, 
         { saturation: 10 }, 
         { lightness: 100 }, 
         { hue: "#ffc243" } 
        ] 
        },{ 
        featureType: "water", 
        stylers: [ 
         { visibility: "simplified" }, 
         { lightness: 70 }, 
         { saturation: 15 }, 
         { hue: "#00ffdd" } 
        ] 
        },{ 
        featureType: "poi", 
        elementType: "geometry", 
        stylers: [ 
         { visibility: "on" }, 
         { saturation: 15 }, 
         { lightness: 89 }, 
         { hue: "#e2ded3" } 
        ] 
        },{ 
        featureType: "transit.station", 
        elementType: "geometry", 
        stylers: [ 
         { visibility: "simplified" }, 
         { lightness: 85 }, 
         { hue: "#e2ded3" }, 
         { saturation: 15 } 
        ] 
        }, 
        { 
        featureType: "poi.park", 
        elementType: "geometry", 
        stylers: [ 
         { hue: "#61bb00" }, 
         { lightness: -15}, 
         { saturation: 20}, 
         { visibility: "simplified" } 
        ] 
        },{ 
        featureType: "transit.station", 
        elementType: "labels", 
        stylers: [ 
         { hue: "#06bca9" }, 
         { saturation: -30}, 
         { lightness: -10}, 
         { visibility: "on" } 
        ] 
        } 
       ] 

      }; 

     MAP = new google.maps.Map(document.getElementById("map"), myOptions); 








     /* 
     This is the UrbanDistance's (i.e. the public transport layer) UI function. 
     This function gets called during the setup process and you can easily setup your UI in there 
     Parameters: 
      mapnificent: the mapnificent instance, responsible for how to draw on the map 
      that: the urbanDistance layer object, responsible for handling the public transport travel time calculation and drawing 
      $: jQuery for your convenience, scoped to this function, shortcut to window 
      undefined: the real undefined value, only 4 arguments are passed 

     */ 

     var UrbanDistanceUI = function(mapnificent, that, $, window, undefined){ 
      /* that.bind binds a function to an event of the layer 
       setup is called when the setup of the layer is complete 
       and before the loading of necessary data. 
      */ 
      that.bind("setup", function(){ 
       /* There are many options for the public transport layer 
       They can be read with .getOption and set with .setOption */ 
       var color = that.getOption("color"); 
       that.setOption("color", true); 
       /* you must display this copyright notice somewhere on your page */ 
       $("#copyright").html(that.getOption("copyright")); 
       console.log("setup done"); 
      }); 


      /* 
      loadProgress binds to the data loading progress, 
      you will receive one parameter: a percentage */ 
      that.bind("loadProgress", function(progress){ 

       $('#loading').text(progress); 
       if(progress >= 100){ 
        $('#loading').text("Almost done..."); 
       } 
      }); 

      /* 
      fires when the data has finished loading */ 
      that.bind("dataLoaded", function(){ 
       $('#loading').text("Done!"); 
       var geopos = {lat:40.75297891717686,lng:-73.93936157226562}, time = 30 * 60; 
       /* adds a position to the map at the specificed location. 
       Time can be left out for the default time (15 minutes) */ 
       var pos = that.addPosition(geopos, time); // time in seconds! 
       /* The call returns a position object that you can store. 
       You can store it by it's index pos.index */ 
       positions[pos.index] = {position: pos, latlng: geopos}; 
       /* You only created a position, you need to start the 
       calculation process explicitly */ 
       pos.startCalculation(); 
      }); 

      /* fires when a calculation has started, receives position as parameter */ 
      that.bind("calculationStarted", function(position){ 
       $('#loading').text("Starting calculation: 0.0%"); 
      }); 

      /* fires when there is a calculation progress, receives position as parameter */ 
      that.bind("calculationUpdated", function(position){ 
       /* estimating the progress is not an exact since 
       the option value "estimatedMaxCalculateCalls" is 
       an estimated upper bound of position.calculationProgress 
       */ 
       var percent = position.calculationProgress/
        that.getOption("estimatedMaxCalculateCalls") * 100; 
       $('#loading').text("Calculating: "+percent+"%"); 
      }); 

      /*fires when the calculation is done */ 
      that.bind("calculationDone", function(position){ 
       $('#loading').text("Calculation Done!"); 
       console.log("done"); 
       /* you need to trigger a redraw of the canvas yourself at appropriate moments */ 
       mapnificent.trigger("redraw"); 
       /* see getBlobs function further down */ 
       getBlobs(); 
      }); 

      var movePosition = function(index, pos){ 
       /* you can move your position with the .move method of a position 
       it takes an geo object {lat: X, lng:Y} as first parameter. 
       last parameter indicates if positionMoved should be triggered */ 
       var result = positions[index].position.move(pos, true); 
       /* result indicates if the position is in range of the current city data 
       if it is not, positionMoved has not been triggered, regardless of second parameter 
       it it is true, postionMoved has been triggered (it already executed) 
       the latlng field of the position is set regardless of anything 
       */ 
       if (!result){ 
        console.log("moved outside of range!"); 
       } 
      }; 
      /* triggered when a position moved inside the range */ 
      that.bind("positionMoved", function(pos){ 
       positions[pos.index].latlng = pos.latlng; 
       console.log("position move to ", pos.latlng); 
      }); 

      var removePosition = function(index){ 
       /* you can call removePosition on the UB layer with an index 
       to remove this position. This will also stop all ongoing calculations */ 
       that.removePosition(index); 
      }; 

      /* fires after successful removal */ 
      that.bind("positionRemoved", function(index){ 
       console.log("position removed"); 
       delete startPositions[index]; 
       mapnificent.trigger("redraw"); 
      }); 

      var getBlobs = function(){ 
       /* A blob is a currently visible*, highlighted area that is 
       separate from other highlighted areas. The blob contains the 
       maxbounds in canvas coordinates, and some other information */ 

       var blobs = that.search.detectBlobs(); 
       console.log(blobs); 
      }; 

     /* tried adding in a '}' here */  


















     google.maps.event.addListenerOnce(MAP, "idle", function() { 
     HEATMAP = new HeatmapOverlay(MAP, { 
      "radius": 30, 
      "visible": true, 
      "opacity": 60 
     }); 

     getDataPoints("theater", "http://doug.cartodb.com/api/v2/sql/?q=SELECT ST_x(geom) AS lng, ST_y(geom) AS lat, count(*) FROM (SELECT ST_SnapToGrid(the_geom,0.005) AS geom FROM v_theaters) AS foo GROUP BY lng, lat"); 
     getDataPoints("noise", "http://doug.cartodb.com/api/v2/sql/?q=SELECT ST_x(geom) AS lng, ST_y(geom) AS lat, count(*) FROM (SELECT ST_SnapToGrid(the_geom,0.005) AS geom FROM noise) AS foo GROUP BY lng, lat"); 
     getDataPoints("4sqDrug", "http://doug.cartodb.com/api/v2/sql/?q=SELECT ST_x(geom) AS lng, ST_y(geom) AS lat, count(*) FROM (SELECT ST_SnapToGrid(the_geom,0.005) AS geom FROM _4sq_15_32_47_drugstores_20or_20pharmacies) AS foo GROUP BY lng, lat");   
     }); 





     if(typeof Mapnificent !== "undefined" && Mapnificent.isBrowserSupported()){ 
      /* load Mapnificent options for these coordinates */ 
      Mapnificent.forCoordinates({lat:40.75297891717686,lng:-73.93936157226562}, function(options){ 
       if(options == null){ 
        /* if null, there is no Mapnificent data for this point */ 
        return; 
       } 
       /* if there are options, you can instantiate a new Mapnificent instance */ 
       mapnificent = Mapnificent(options); 
       /* add the "urbanDistance" layer with the UI function */ 
       mapnificent.addLayer("urbanDistance", UrbanDistanceUI); 
       /* you can bind to the initDone event of mapnificent */ 
       mapnificent.bind("initDone", function(){ 
        // mapnificent.hide(); 
       }); 
       /* finally add mapnificent to your map by passing the Google Maps instance */ 
       mapnificent.addToMap(map); 
      }); 
     } 





     /* tried removing a "});" from two lines below this comment */ 

    }); 

    function showHeatmap() { 
     var max = 0; 
     var all_points = []; 
     for(var key in DATAPOINTS) { 
     DATAPOINTS[key].rows.forEach(function(row) { 
      if (row.count > max) { 
      max = row.count 
      } 
     }); 
     all_points = all_points.concat(DATAPOINTS[key].rows); 
     } 

     var testData = { 
     max: max, 
     data: all_points 
     } 

     HEATMAP.setDataSet(testData); 
    } 

    function getDataPoints(name, url) { 
     $.get(url, function(data) { 
     DATAPOINTS[name] = data; 
     showHeatmap(); 
     }); 
    } 

%b 
    #loading 
    #copyright 

- キャッチされない構文エラー:にconsole.logの使用から入力

.map_holder{:style => "float: left; width: 600px; height: 600px;"} 
    #map{:style => "width: 100%; height: 100%; border: 1px solid #333;"} 
.side_bar{:style => "float: right;"} 
    %p SideBar 
    = label_tag "Noise Data" 
    = check_box_tag "Test" 
.cl{:style => "clear: both;"} 
+0

これはサーバー側エラー(Ruby/Haml)かクライアント側エラー(ブラウザ内のJS)ですか?それが後者の場合、Hamlのgobを投稿することは役に立たない。ブラウザに送信されるものを表示し、そのコードを表示する。 – Phrogz

答えて

0

の予期しない終了()、I今すぐIEでテストしているわけではありません。エラーがIEにあった場合でも、私は言う行から末尾のカンマを削除します。このような場合には

{ visibility: "simplified" }, 

は、私が知っている最高のデバッグ手法は、「バイナリ検索」をやっています。半分のコードを削除してください(もちろん、大カッコや中カッコを残してはいけません)。ブラウザで実行し、構文エラーが残っていないか確認してください。コードの小さな部分に絞るまで繰り返します。

+0

こんにちは@Alex、私はFirefox、Chrome、Safariでテストしてきました。 FirebugはChrome DevToolsよりも多くのヘルプを提供しました。私のコメントの後に行を変更しようとしました( '/ *は削除しようとしました '));"このコメントの下の2行〜/ ')、それを'}); ''}};に変更し、ページがエラーを回避する間、マップ上のレイヤーは読み込まれません。 – Doug

関連する問題