表示領域の調整（v1）
表示領域を調整します。
HTML(サンプルコード)
<div id="map"></div>
<div style="text-align: center">
<button id="fit-route">ルート全体を表示する</button>
</div>
<style>
#map {
height: 400px;
width: 700px;
margin: 0 auto;
}
</style>
JavaScript(サンプルコード)
// 地図を初期化します
const center = new navitime.geo.LatLng('35.595980', '139.716250');
// 地図を用意します
const map = new navitime.geo.Map('map', center, 11, {
bounds: new navitime.geo.BoundsInfo(0, $('#map').width(), 0, $('#map').height())
});
// ルート結果を取得
const route_response = {
"type": "FeatureCollection",
"features": [
...
],
"bbox": [
139.62145,
35.382457,
140.134892,
35.735974
]
}
// ルート線を描画
routePath = new navitime.geo.route.Renderer(route_response, {
map: map,
unit: 'degree', // 座標の単位表記
arrow: true, // ルート線上に進行方向の矢印を表示するか
originalColor: true
})
routePath.draw();
document.querySelector('#fit-route').addEventListener('click', () => {
// ルート全体を収める場合はBoundingBoxを利用すると良い
// BoundingBoxの値を参照し、ポジションを設定する
const bounding = route_response.bbox;
const leftBottom = new navitime.geo.LatLng(bounding[1], bounding[0]);
const rightTop = new navitime.geo.LatLng(bounding[3], bounding[2]);
const position = [leftBottom, rightTop];
// 指定された緯度経度を元に最適なズーム及び中心点を計算します
const adjusted = navitime.geo.Util.calcAutomaticAdjustmentViewPort(map, position);
map.moveTo(adjusted.latlng, adjusted.zoom);
});