Question

输入“范围”和传单地图的OSM建筑有问题。我使用了来自official example的基本示例，但是如果我将jquery mobile添加到<head>部分，它会打破范围输入。这很奇怪......我使用jquery移动输入来改变传单地图的不透明度并且它正在工作。这是我的基本例子：

	var map = new L.Map('map');
map.setView([52.52111, 13.40988], 16, false);

new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'osm.org',
  maxZoom: 18,
  maxNativeZoom: 20
}).addTo(map);

var osmb = new OSMBuildings(map).load();

//************************************************************

var now,
  date, time,
  timeRange, dateRange,
  timeRangeLabel, dateRangeLabel;

function changeDate() {
  var Y = now.getFullYear(),
    M = now.getMonth(),
    D = now.getDate(),
    h = now.getHours(),
    m = 0;

  timeRangeLabel.innerText = pad(h) + ':' + pad(m);
  dateRangeLabel.innerText = Y + '-' + pad(M+1) + '-' + pad(D);

  osmb.date(new Date(Y, M, D, h, m));
}

function onTimeChange() {
  now.setHours(this.value);
  now.setMinutes(0);
  changeDate();
}

function onDateChange() {
  now.setMonth(0);
  now.setDate(this.value);
  changeDate();
}

function pad(v) {
  return (v < 10 ? '0' : '') + v;
}

timeRange = document.getElementById('time');
dateRange = document.getElementById('date');
timeRangeLabel = document.querySelector('*[for=time]');
dateRangeLabel = document.querySelector('*[for=date]');

now = new Date;
changeDate();

// init with day of year
var Jan1 = new Date(now.getFullYear(), 0, 1);
dateRange.value = Math.ceil((now-Jan1)/86400000);

timeRange.value = now.getHours();

timeRange.addEventListener('change', onTimeChange);
dateRange.addEventListener('change', onDateChange );
timeRange.addEventListener('input', onTimeChange);
dateRange.addEventListener('input', onDateChange);

body {
  font-family: sans-serif;
  padding: 5px;
  margin: 0;
}

#map {
  width: 300px;
  height: 300px;
  float: left;
  margin: 0 15px 0 0;
}

label {
  height: 20px;
}

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Shadows</title>
  
  

  <script src='http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js'></script>

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  
<script src='http://cdn.osmbuildings.org/OSMBuildings-Leaflet.js'></script>
    <link rel='stylesheet prefetch' href='http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css'>



  
</head>



<body>
  <div id="map"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<input  id="date" type="range" min="1" max="365" step="1"><label for="date"></label><br>
<input id="time" type="range" min="0" max="23" step="1"><label for="time"></label>


</body>
</html>

Answer 1

对于jQuery Mobile rangeliders，您可以使用：

$(document).on("pagecreate", "#page-1", function() {
  $("#date").on("change", onDateChange);
  $("#time").on("change", onTimeChange);
});

Codepen：http://codepen.io/anon/pen/gLJRXb

OSM构建和jQuery移动

1 个答案: