表示領域の調整

表示領域を調整します。

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);
// ルート結果を取得
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);
});

利用 API

  • /map_script

利用地図スクリプト API