サーバー側のロジックに基づいてコメットがマップにマーカーを動的に追加することを見越して、OpenLayers マップを静的に表示しようとする単純なリフト「アプリケーション」があります。いずれにせよ、地図を表示させるだけでも大変な作業です。
HTML は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("mainMap");
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(-76.6778,39.2652).transform( fromProjection, toProjection);
var zoom = 9;
map.addLayer(mapnik);
map.setCenter(position, zoom );
}
</script>
</head>
<body class="lift:content_id=main" onload="init();">
<div id="main" class="lift:surround?with=bootstrap;at=content">
<div id="mainMap"> </div>
</div>
</body>
</html>
私は明らかに、lift:surround がその魔法を働かせた後、lift によって生成された頭と体の要素がどこから来ているのかを理解するのに苦労しています。静的 HTML は問題ないように見えますが、関連するスクリプト要素がなくなっており、マップを表示するために init() を呼び出す方法がないようです。
どうにかしてサラウンド スニピットをオーバーライドするか、まったく使用しないようにするか、スニピット内ですべての init() JavaScript を構築してから何らかの方法で呼び出す必要がありますか? または、他の何か？私は少し初心者なので、ベースから外れている場合はご容赦ください;)
私が試したもう1つのことは、投稿されたページを囲むために使用しているbootstrap.htmlファイルに関連するヘッド/スクリプトHTMLコードを追加することです。
編集：リフト：サラウンドスニピットに指定されたbootstrap.htmlファイルへの変更を確認できない（通常の）キャッシュの問題がありました。それは実際にうまくいきました。