「OpenLayers with jQuery Mobile（mobile-jq.html）」を参考に、 jQuery Mobile を使用して地図を表示します。
jQuery Mobile は、HTML5 の仕様で、タッチ操作に最適化したモバイルアプリケーションを開発するための JavaScript のフレームワークです。
同じように「mobile_jq.js」を開きます。
f 「mobile-jq.html」の内容をコピーして「ol019f-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-jq_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-jq.js」の内容をコピーして貼り付け、修正します。
「ol019f-nippon_bmi_takata_pgis.html」
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>OpenLayers with jQuery Mobile(R.Takata)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes">
<!-- 追加 --> <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script> <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script> <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script> <!-- 追加ここまで -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!-- 修正 --> <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" /> <link rel="stylesheet" href="style.mobile-jq_takata.css" type="text/css"> <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script> <script src="mobile-base_takata.js"></script> <script src="mobile-jq_takata.js"></script> <!-- 修正ここまで -->
</head> <body> <h1 id="title">OpenLayers with jQuery Mobile(R.Takata)</h1> <div id="tags"> mobile, jquery </div> <p id="shortdesc"> Using jQuery Mobile to display an OpenLayers map. </p>
<div data-role="page" id="mappage"> <div data-role="content"> <div id="map"></div> </div> <div data-role="footer"> <!-- 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため <a href="#searchpage" data-icon="search" data-role="button">Search</a> --> <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>---
「mobile-jquery_takata.js」
---
$('#popup').live('pageshow',function(event, ui){
var li = "";
for(var attr in selectedFeature.attributes){
li += "<li><div style='width:25%;float:left'>"
+ attr
+ "</div><div style='width:75%;float:right'>"
+ selectedFeature.attributes[attr] + "</div></li>";
}
$("ul#details-list").empty().append(li).listview("refresh");
});
/* 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため検索できません
$('#searchpage').live('pageshow',function(event, ui){
$('#query').bind('change', function(e){
$('#search_results').empty();
if ($('#query')[0].value === '') {
return;
}
$.mobile.showPageLoadingMsg();
// Prevent form send e.preventDefault();
var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
searchUrl += '&name_startsWith=' + $('#query')[0].value;
$.getJSON(searchUrl, function(data) {
$.each(data.geonames, function() {
var place = this;
$('<li>')
.hide()
.append($('<h2 />', {
text: place.name
}))
.append($('<p />', {
html: '<b>' + place.countryName + '</b> ' + place.fcodeName
}))
.appendTo('#search_results')
.click(function() {
$.mobile.changePage('#mappage');
var lonlat = new OpenLayers.LonLat(place.lng, place.lat);
map.setCenter(lonlat.transform(gg, sm), 10);
})
.show();
});
$('#search_results').listview('refresh');
$.mobile.hidePageLoadingMsg();
});
});
// only listen to the first event triggered
$('#searchpage').die('pageshow', arguments.callee);
});
*/
function initLayerList() {
---
0 件のコメント:
コメントを投稿