1

我一直在关注创建地图的教程，该地图将根据特定城市的人口在特定地方显示大头针。

一切都运行良好，直到 Jquery UI 滑块我无法显示为输入文本字段以外的任何内容？

目前我的应用程序中有以下代码：

索引.html.erb

<div id='population-range' style="width: 500px"></div>
<input type="text" id="filtered-pop" style="width: 200px"/>

应用程序.JS

//
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery.ui.slider

<script type="text/javascript">
  $(document).ready(function() {
    Gmaps.map.callback = function() {

      var PopulationFilter = {
        min: 800000,
        max: 10000000,
      };

      $( "#filtered-pop" ).val( (PopulationFilter.min)+ " - " + (PopulationFilter.max))
      $("#population-range").slider({
        range: true,
        min: PopulationFilter.min,
        max: PopulationFilter.max,
        values: [ PopulationFilter.min, PopulationFilter.max ],
        slide: function(event, ui) {
          $( "#filtered-pop" ).val( (ui.values[ 0 ])+ " - " + (ui.values[ 1 ]))
          PopulationFilter.min = ui.values[ 0 ]
          PopulationFilter.max = ui.values[ 1 ]
          applyFilters()
        }
      });

      var VisibleMarkers = function() {
      var filtered = _.reject(Gmaps.map.markers, function(marker) {
          return marker.population < PopulationFilter.min || marker.population > PopulationFilter.max;
        });
        return filtered
       }

      var applyFilters = function() {
        _.each(Gmaps.map.markers, function(marker) {
          Gmaps.map.hideMarker(marker)
        })
        _.each(VisibleMarkers(), function(marker) {
          Gmaps.map.showMarker(marker)
        })
      };
   }
});
</script>

应用程序.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 *= require jquery.ui.slider
*/

就我可能出错的地方获得任何建议会很棒吗？提前致谢。

4

0 回答 0