日本のデータを使用したはじめに

このセクションでは、日本固有のデータおよびマップスタイルで HERE Maps API for Javascript を使用する方法について説明します。 このデータへのアクセス権は、ユーザーの契約によって決まります。 このレイヤーへのアクセス権を取得するに は、営業担当者に連絡するか、または弊社にお問い合わせください。

ユースケース

以下のセクションで は、「クイックスタート 」の章の手順について説明しますが、さらに次の方法についても説明します。

  1. "core"タイル API が Vector JavaScript API のレイヤーを呼び出すように設定します
  2. 日本のデータに適したマップスタイルを取得します。
  3. 日本国内のルートを表示します。

API コードライブラリを読み込みます

JavaScript API のページへの掲載方法に変更は <head> ありません。 HERE は、コアおよびサービスモジュールをロードし、モバイルデバイスで最適なパフォーマンスを確保する完全な要素です。

<!DOCTYPE html>
  <html>
    <head>
      ...
      <meta name="viewport" content="initial-scale=1.0,
        width=device-width" />
      <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
        type="text/javascript" charset="utf-8"></script>
      <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
        type="text/javascript" charset="utf-8"></script>
      ...
    </head>
    <body>
      <div style="width: 640px; height: 480px" id="mapContainer"></div>

バックエンドサービスとの通信を初期化します

Platform API キー を渡して、通常どおりオブジェクトを初期化します。

var platform = new H.service.Platform({
  'apikey': '{YOUR_API_KEY}'
});

地図を初期化します

  1. 日本のデータを提供するcoreエンドポイントを使用するように事前に設定されている Vector タイルサービスオブジェクトのインスタンスを作成します。
  2. 日本のデータの表示に最適化されたマップスタイルを使用するレイヤーを作成します。 スタイルは 、地図カスタマイズツールを使用して調整できます。
  3. H.Map 以下を指定して、オブジェクトをインスタンス化します。
    • マップのコンテナ要素
    • 前のステップで作成したレイヤー
    • 地図を表示するズーム レベル
    • 地図を中央に配置するポイントの地理座標

// configure an OMV service to use the `core` enpoint
var omvService = platform.getOMVService({path:  'v2/vectortiles/core/mc'});
var baseUrl = 'https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';

// create a Japan specific style
var style = new H.map.Style(`${baseUrl}normal.day.yaml`, baseUrl);

// instantiate provider and layer for the basemap
var omvProvider = new H.service.omv.Provider(omvService, style);
var omvlayer = new H.map.layer.TileLayer(omvProvider, {max: 22});

// instantiate (and display) a map:
var map = new H.Map(
    document.getElementById('mapContainer'),
    omvlayer,
    {
      zoom: 17,
      center: {lat: 35.68026, lng: 139.76744}
    });

実装では、次のマップイメージが表示されます。

基本的な非インタラクティブマップ
図 1. 基本的な非インタラクティブマップ

ジオ コーディングとルーティング

ジオ コーディング and Search and Routing API V8 を日本で使用するために、データを追加調整する必要はありません。

次の例では、東京エリアの 2 つのポイントをジオコードして、それらのポイント間のルートを計算する方法を示します。 以下のスニペット：

  • ルートの始点と終点をジオコード化します。
  • 応答を解析してルートポリラインを表示するルーティングパラメータおよびルーティングコールバックを定義します。
  • ルーティングサービスをインスタンス化し、ルートを計算します
let origin;
let destination;

let onError = (error) => {
  alert(error.message);
}

// create an instance of the routing service and make a request
let router = platform.getRoutingService(null, 8);

// Define a callback function to process the routing response:
let onResult = function(result) {
  // ensure that at least one route was found
  if (result.routes.length) {
    result.routes[0].sections.forEach((section) => {
         // Create a linestring to use as a point source for the route line
        let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);

        // Create a polyline to display the route:
        let routeLine = new H.map.Polyline(linestring, {
          style: { strokeColor: 'blue', lineWidth: 3 }
        });

        // Create a marker for the start point:
        let startMarker = new H.map.Marker(section.departure.place.location);

        // Create a marker for the end point:
        let endMarker = new H.map.Marker(section.arrival.place.location);

        // Add the route polyline and the two markers to the map:
        map.addObjects([routeLine, startMarker, endMarker]);

        // Set the map's viewport to make the whole route visible:
        map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
    });
  }
};

let routingParameters = {
  'transportMode': 'car',
  // Include the route shape in the response
  'return': 'polyline'
};

// Define a callback that calculates the route
let calculateRoute = () => {
  // Make sure that both destination and origin are present
  if (!origin || !destination) return;

  // Add origin and destination to the routing parameters
  routingParameters.origin = origin;
  routingParameters.destination = destination;

  router.calculateRoute(routingParameters, onResult, onError);
}

// get the instance of the Search service
var service = platform.getSearchService();

// geocode origin point
service.geocode({
  q: '東京都中央区佃１‐１１‐８'
}, (result) => {
  origin = result.items[0].position.lat + ',' + result.items[0].position.lng;
  calculateRoute();
}, onError);

// geocode a destination point
service.geocode({
  q: '東京都千代田区丸の内１‐９'
}, (result) => {
  destination = result.items[0].position.lat + ',' + result.items[0].position.lng;
  calculateRoute();
}, onError)

次の図は、上記のコードからのルーティングリクエストの結果を示しています。

ルートを使用して地図を作成します
図 2. ルートを使用して地図を作成します

「」に一致する結果は 件です

    「」に一致する結果はありません