私は、特定の都市の人口に応じて特定の場所でピンを表示するマップを作成するためのチュートリアルに従っています。
入力テキストフィールド以外のものとして表示できないJqueryUIスライダーまで、すべてがうまく機能していましたか?
現在、アプリに次のコードがあります。
Index.html.erb
<div id='population-range' style="width: 500px"></div>
<input type="text" id="filtered-pop" style="width: 200px"/>
Application.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>
Application.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
*/
私がどこで間違っているのかについてアドバイスを得るのは素晴らしいことですか?前もって感謝します。