マーカーオブジェクト

マップアプリケーションの最も一般的なユースケースの 1 つは、POI（施設情報）をマップに表示することです。 HERE Maps API for Javascript を使用すると、マーカーとして POI を表すことができるため、簡単に実装できます。

Maps API には、次の 2 種類のマーカーがあります。

いずれかのタイプのマーカーは、その緯度および経度によって定義された地理的ポイントと、アイコンである視覚的表現で構成されます。 マーカーアイコンは画面スペースで表示されます。つまり、マップのズーム レベルに関係なく、サイズは変更されません。

Marker および DomMarker では、異なる種類のアイコンが必要です。 オブジェクトMarkerは インスタンスIcon (H.map.Icon) を受け入れ、DomMarkerは のインスタンスDomIcon (H.map.DomIcon)を必要とします。 このスキームでは、複数のマーカーオブジェクトでアイコンを再利用できます。

Markers と DomMarkers は別のレンダリング手順でレンダリングされることにも注意 してください。Markersはマップ シーンでレンダリングされ、マップの上にオーバーレイとしてレンダリングされたすべてのDomMarkersの背後に表示されます。

静的な SVG アイコンのマーカー

次のコードは、 SVG アイコンを使用してマーカーをインスタンス化する方法を示しています。

// Create a map:
var map = new H.Map(...);

// Define a variable holding SVG mark-up that defines an icon image:
var svgMarkup = '<svg width="24" height="24" ' +
    'xmlns="http://www.w3.org/2000/svg">' +
    '<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
    'height="22" /><text x="12" y="18" font-size="12pt" ' +
    'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
    'fill="white">H</text></svg>';

// Create an icon, an object holding the latitude and longitude, and a marker:
var icon = new H.map.Icon(svgMarkup),
    coords = {lat: 52.53075, lng: 13.3851},
    marker = new H.map.Marker(coords, {icon: icon});

// Add the marker to the map and center the map at the location of the marker:
map.addObject(marker);
map.setCenter(coords);

コードが実行されると、次のものが作成されます

1. マップ オブジェクト ( 「利用開始」も参照) 。
2. SVG アイコンのイメージ ( 文字列 ) 。
3. 位置の地理的座標、および「normal」のマーカを含むオブジェクト。

コードの最後の行で、新たに作成されたマーカーがマップに追加されます。

マーカーの位置を中心にした結果のマップが、次の図に示されています。

静止画像のマーカー

次のコード スニペットは、イメージ URL からアイコンとマーカーをインスタンス化する方法を示しています。

// Create a map:
var map = new H.Map(...);

// Create a marker icon from an image URL:
var icon = new H.map.Icon('graphics/markerHouse.png');

// Create a marker using the previously instantiated icon:
var marker = new H.map.Marker({ lat: 52.5, lng: 13.4 }, { icon: icon });

// Add the marker to the map:
map.addObject(marker);

コードが実行されると、次のものが作成されます

1. マップ オブジェクト ( 「利用開始」も参照)
2. ビットマップの URL を使用するアイコン (PNG イメージ )
3. ビットマップで初期化された「normal」マーカー。

コードの最後の行で、マップにマーカーが追加されます。

以下のイメージは、ビットマップアイコンを使用するマーカーの位置を中心にしたマップを示しています。

この例では、基本的なパラメータのセットを使用して、カスタム画像アイコンを含むマーカーを作成します。 ただし、アイコンとマーカーには、追加のカスタマイズオプションが用意されており、パラメーターとしてコンストラクタに渡すことができます。 これらのオプションには、画像アイコンのカスタムのヒット領域やアンカーなどがあります。 すべてのドキュメントについては、『 API リファレンス 』を参照してください。

HTML/SVG コンテンツを含むマーカー

画像マーカーは、静的なグラフィックコンテンツを使用して、マップ上のPOIを強調表示するのに適しています。 特定の使用例では、事前にレンダリングされた画像ではなく、インタラクティブまたはアニメーション化された HTML コンテンツ（アニメーション GIF 、アニメーション化された SVG 、ホバーリング効果など）をマーカーに提供することが望ましいです。 Maps API は 、このようなユースケースのクラスDomMarkerを提供します。

次の例は、DomMarkerを 使用して、アニメーション化された SVG コンテンツを含むマーカーを作成する方法を示しています。 この場合、アニメーション化されたマーカーのアイコンはボールのバウンスです。

// Create a map object:
var map = new H.Map(...);

// Define a variable holding SVG mark-up that defines an animated icon image:
var animatedSvg =
    '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" ' + 
    'y="0px" style="margin:-112px 0 0 -32px" width="136px"' + 
    'height="150px" viewBox="0 0 136 150"><ellipse fill="#000" ' +
    'cx="32" cy="128" rx="36" ry="4"><animate attributeName="cx" ' + 
    'from="32" to="32" begin="0s" dur="1.5s" values="96;32;96" ' + 
    'keySplines=".6 .1 .8 .1; .1 .8 .1 1" keyTimes="0;0.4;1"' + 
    'calcMode="spline" repeatCount="indefinite"/>' +    
    '<animate attributeName="rx" from="36" to="36" begin="0s"' +
    'dur="1.5s" values="36;10;36" keySplines=".6 .0 .8 .0; .0 .8 .0 1"' + 
    'keyTimes="0;0.4;1" calcMode="spline" repeatCount="indefinite"/>' +
    '<animate attributeName="opacity" from=".2" to=".2"  begin="0s" ' +
    ' dur="1.5s" values=".1;.7;.1" keySplines=" .6.0 .8 .0; .0 .8 .0 1" ' +
    'keyTimes=" 0;0.4;1" calcMode="spline" ' +
    'repeatCount="indefinite"/></ellipse><ellipse fill="#1b468d" ' +
    'cx="26" cy="20" rx="16" ry="12"><animate attributeName="cy" ' +
    'from="20" to="20" begin="0s" dur="1.5s" values="20;112;20" ' +
    'keySplines=".6 .1 .8 .1; .1 .8 .1 1" keyTimes=" 0;0.4;1" ' +
    'calcMode="spline" repeatCount="indefinite"/> ' +
    '<animate attributeName="ry" from="16" to="16" begin="0s" ' + 
    'dur="1.5s" values="16;12;16" keySplines=".6 .0 .8 .0; .0 .8 .0 1" ' +
    'keyTimes="0;0.4;1" calcMode="spline" ' +
    'repeatCount="indefinite"/></ellipse></svg>';

// Create an icon object, an object with geographic coordinates and a marker:
var icon = new H.map.DomIcon(animatedSvg),
    coords = {lat: -22.8906, lng: -43.2283},
    marker = new H.map.DomMarker(coords, {icon: icon});

// Set map center and zoom, add the marker to the map:
map.setCenter(coords);
map.setZoom(18);
map.addObject(marker);

コードが実行されると、次のものが作成されます

1. マップ オブジェクト ( 「利用開始」も参照) 。
2. アニメーション化された SVG イメージの定義を保持する変数。
3. アイコン（ SVG イメージで初期化されます）。
4. 場所の地理的座標を含むオブジェクト。
5. 「normal」のマーカー。

最後の2 行は、マップにマーカーを追加し、地理座標を保持するオブジェクトを使用して地図の中央に配置します。

次のイメージは、アニメーションアイコンを使用したマーカーが付いたマップを示しています。

高架マーカーが上昇しました

WebGL レンダリングエンジンのユーザーは、マップの傾きを変更できます。 特定の場所を強調表示するには、マーカーを上げる必要がある場合があります。 これには、次の 2 つの方法があります。

1. 高度の値を指定します（ Marker との両方で機能 DomMarker）。
2. H.map.Iconのオプション stickHeightを使用して、マーカーアイコンを上昇させます（ Markerの場合のみ機能）。

以下の画像は、これらのケースをハイライトしています。 赤いマーカーは、建物の屋根に高度プロパティを使用して配置され、地面には青のマーカーが配置されますが、スティックの高さと色のプロパティを使用します。 これらの機能を結合することもできます。

stickHeight が指定されている場合、アイコンはマップの現在のチルト角に応じて画面スペースの Y 軸で上昇します。 上昇したアンカーポイントと元のアンカーポイントを接続するために、直線が描画されます。 アイコンスティックの色は、プロパティstickColorを使用して指定できます。

指定された値は、 90 ° のチルトでのスティックの CSS ピクセル単位の最大高さです。 0 ° のチルト角では、アイコンが上昇しないため、スティックが見えません。