地図の表示スクリプト部分に OpenLayers.Control.NavigationHistory を次のように追加します。
---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.events.register("moveend", null, displayZoom);
map.fractionalZoom = input.checked;
map.zoomTo(Math.round(map.zoom));
nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
map.addControl(nav);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var controlOptions = {
mapOptions: mapOptions
};
var overview = new OpenLayers.Control.OverviewMap(controlOptions);
map.addControl(overview);
overview.maximizeControl();
var mouseposition = new OpenLayers.Control.MousePosition();
map.addControl(mouseposition);
map.events.register("mousemove", map, function(e) {
var position = this.events.getMousePosition(e);
OpenLayers.Util.getElement("coords").innerHTML = position;
});
var keyboard = new OpenLayers.Control.KeyboardDefaults();
map.addControl(keyboard);
//ここから追加
var nav = new OpenLayers.Control.NavigationHistory();
map.addControl(nav);
var panel = new OpenLayers.Control.Panel({div: document.getElementById("panel")});
panel.addControls([nav.next, nav.previous]);
map.addControl(panel);
//ここまで
}
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
</script>
---
<body> タグ内に次のように <div> タグを追加し、キー操作の説明とアクセスキー操作の設定をします。
---
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<div id="panel" style="margin-left:50px;"></div>
<div id="coords" style="margin-left:50px;"></div>
---
スタイルシートを次のように追加します。
---
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
a {
text-decoration: none;
font-size: 1.2em;
}
a em {
font-style: normal;
font-weight: normal;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a.api {
font-size:1em;
text-decoration:underline;
}
/* ここから追加 */
#panel {
right: 0px;
height: 30px;
width: 200px;
}
#panel div {
float: left;
margin: 5px;
}
/* ここまで */
</style>
---
0 件のコメント:
コメントを投稿