HERE Maps for JavaScript

事前要件

  • JavaScript ライブラリは、こちらから
  • サービスにアクセスするための資格情報。 詳細については、『 Identity & Access Management 開発者ガイド』を参照してください。
  • apikeyによる認証。 header tokenによる認証 はサポートされていません。

ライブデモ

ここで包括的なサンプルセットを参照できます。

コード

基本的な例では、ライブラリコンポーネントをページに追加します。

<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

この例の CSS は次のようになります。

        body { width: 100%; height: 100%; position: absolute; margin: 0px; padding: 0px; overflow: hidden;}
        #map { position:absolute; top:0; bottom:0; width:100%; height: 100%;}

次の JavaScript スニペットは、提供されたコンテナ内でマップをレンダリングし、マップの対話を有効にします。

    <body>
        <div id="map"></div>
        <script>
            const platform = new H.service.Platform({
                'apikey': '{YOUR_APIKEY}'
            });

            // Obtain the default map types from the platform object:
            const defaultLayers = platform.createDefaultLayers();

            // Instantiate (and display) a map:
            var map = new H.Map(
                document.getElementById("map"),
                defaultLayers.vector.normal.map, {
                    zoom: 14,
                    center: { lat: 52.5, lng: 13.4 }
                });

            // MapEvents enables the event system
            // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
            const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
        </script>
    </body>

カスタム設定

ライブラリ は、デフォルトとは異なるパスを使用するように 設定できます。 次の例は、このようなユースケースを示しています。

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

// create a service that calls the custom endpoint
var service = platform.getOMVService({path:  'v2/vectortiles/core/mc'});
// create a provider and a layer that use the custom service and a custom style
var provider = new H.service.omv.Provider(service,
    new H.map.Style('https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/normal.day.yaml'));
var layer = new H.map.layer.TileLayer(provider, {max: 22});

// Instantiate (and display) a map:
var map = new H.Map(
    document.getElementById("map"),
    layer, {
        zoom: 14,
        center: { lat: 52.5, lng: 13.4 }
    });

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

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