Maps API for JavaScript の UI コントロールにより、ユーザーの操作性が向上し、マッピングアプリケーションがより使いやすいようになります。 これらのコントロールにより、操作性が向上し、重要な地図情報が提供されます。 これらのコントロールを使用すると、特定の要件に合わせてカスタマイズされた魅力的なマッピングアプリケーションを作成できます。
Maps API for JavaScript には、と呼ばれる UI モジュールが含まれて mapsjs-ui.js います。このモジュールは、アプリケーションに迅速に統合できる、あらかじめ組み込まれたマップコントロールのコレクションを提供します。 既定の UI コントロールには、次のコンポーネントが含まれています。
<body> 要素および内部 <script> タグ内で、 Maps API for JavaScript を使用して、次のコード スニペットを貼り付けるか参照して、デフォルトのレイヤーで構成されるベース マップを作成します。
// Initiate and authenticate your connection to the HERE platform:const platform =newH.service.Platform({'apikey':'your API key'});// Obtain the default map types from the platform object:const defaultLayers = platform.createDefaultLayers();// Instantiate (and display) a map:const map =newH.Map(
document.getElementById("map"),// Center the map on Dublin, Republic of Ireland, with the zoom level of 10:
defaultLayers.vector.normal.map,{zoom:11,center:{lat:53.349805,lng:-6.260310}});// MapEvents enables the event system.// The behavior variable implements default interactions for pan/zoom (also on mobile touch environments).const behavior =newH.mapevents.Behavior(newH.mapevents.MapEvents(map));// Enable dynamic resizing of the map, based on the current size of the enclosing cntainer
window.addEventListener('resize',()=> map.getViewPort().resize());
JavaScript コード スニペット で、 apikey 変数の値を独自の API キー に置き換えます。
結果: 次の例に示すように、 HTML ファイルには基本的なマップが表示されます。
既定の UI コントロールをマップに追加します
Maps API for JavaScript の既定の UI コントロールを使用すると、開発時間の短縮、ユーザビリティの改善、カスタマイズオプションの提供が可能になり、より効率的で使いやすいマッピングアプリケーションが実現します。
次のタグを <head> HTML ファイルの要素に追加して、 Maps API for JavaScript UI モジュールおよび対応する CSS スタイルへのリンクを読み込みます。
// Ensure that you access the control after you initialized the UIconst ui =H.ui.UI.createDefault(map, defaultLayers);const control = ui.getControl('controlName');// Replace 'controlName' with the name of the control you want to manage, for example, 'mapsettings.'
// Create a map layer for the overview controlconst overviewLayers = platform.createDefaultLayers();// Instatiate the overview map by using the H.ui.Overview constructorconst overviewMap =newH.ui.Overview(overviewLayers.raster.satellite.map,{//Set the control position and the map size and zoom parameters with respect to the map's viewportalignment:H.ui.LayoutAlignment.LEFT_BOTTOM,zoomDelta:6,scaleX:5,scaleY:6});// Add the control to the map
ui.addControl('overview', overviewMap);
// Create the coordinates for the Spire of Dublinconst spireCoordinates ={lat:53.349805,lng:-6.260310};// Create the HTML content for the info bubbleconst content ='<div>'+'<h3>Spire of Dublin</h3>'+'<p>Learn more on <a href="https://en.wikipedia.org/wiki/Spire_of_Dublin" target="_blank">Wikipedia</a>.</p>'+'</div>';// Create an info bubble at the Spire of Dublin location with the HTML contentconst infoBubble =newH.ui.InfoBubble(spireCoordinates,{
content
});// Add the info bubble to the UI
ui.addBubble(infoBubble);
const zoomRectangle =newH.ui.ZoomRectangle({// Position the control on the map's viewportalignment:H.ui.LayoutAlignment.RIGHT_BOTTOM});
ui.addControl('rectangle', zoomRectangle);
前の例に示すように、開始マーカー、終了マーカー、およびストップオーバーマーカーを追加できます。一方、 Maps API for JavaScript では、各マーカー間の合計距離と距離の両方が動的に計算されます。 さらに、以前に追加した任意のマーカーの間に分割マーカーを追加したり、地図上でドラッグしてマーカーの位置を調整したりできます。