OSM建筑和jQuery手机

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

\t 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>

来源

2016-12-24 pawaelus

对于jQuery Mobile的rangesliders你可以使用：

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

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

来源

2016-12-24 13:55:18 deblocker

谢谢，你帮了我很多:) – pawaelus

@pawaelus：很高兴帮助你，FYI，JQM与这个官方例子的整合也受到初始规模的限制ssue，这已经在这里解决了：[使用jQuery移动时，地图不会扩大到全尺寸]（http://stackoverflow.com/questions/27008348/map-does-not-expand-to-full-size -on-负载时-使用-jquery的移动？RQ = 1） – deblocker

OSM建筑和jQuery手机

回答

相关问题