HERE API 簡介 - Map 控制項和 UI - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

鐵人賽神助攻 HERE Technologies

HERE API 簡介 - Map 控制項和 UI

12th鐵人賽神助攻 here

chou 2020-09-18 14:21:24 ‧ 686 瀏覽

分享至

在 HERE API 透過 mapsjs-ui.js 提供一組現成的地圖控制項，該控制項支援訊息氣泡的建立。使用者介面中允許您將以下預設組件加入地圖中：

MapSettingsControl：允許更改底圖
ZoomControl：允許更改地圖縮放級別
Scalebar：顯示當前地圖比例尺
以下範例說明如何將 UI 組件加入到地圖。

第一步是在中載入 UI 和 CSS 文件的鏈接，如以下程式碼所示：

  <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>
        <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
            type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css"
            href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
  </head>

接下來，使用預設地圖類型建立一個地圖對象。

<script type="text/javascript" charset="utf-8">
    // 初始化 Platform object
    var platform = new H.service.Platform({
        'apikey': '{YOUR_API_KEY}'
    });

    // 從 Platform object 取得預設的地圖類型
    var defaultLayers = platform.createDefaultLayers();

    // 初始化 map:
    var map = new H.Map(
        document.getElementById('mapContainer'),
        defaultLayers.vector.normal.map,
        {
            zoom: 10,
            center: { lng: 13.4, lat: 52.51 }
        });

    // 建立預設 UI:
    var ui = H.ui.UI.createDefault(map, defaultLayers);
</script>

程式碼執行後，可產生地圖並顯示預設的控制項（包含底部的比例尺，右側的縮放控制項和右下角的地圖選擇器）。

如果要更改UI語言，提供以下語言的本地化版本：

en-US - 英語（美國）
de-DE –德語
es-ES –西班牙文
fi-FI –芬蘭文
fr-FR –法語
it-IT –意大利
nl-NL –荷蘭語
pl-PL –波蘭語
pt-BR –葡萄牙語（巴西）
pt-PT –葡萄牙語（葡萄牙）
ru-RU –俄語
tr-TR –土耳其語
zh-CN –中文（中國）

在以下建立預設 UI 程式碼加上 UI 語言。

    var ui = H.ui.UI.createDefault(map, defaultLayers, 'de-DE');

下圖為德文 UI 語言顯示結果。

參考文件：
Map Controls and UI

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22045 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

HERE API 簡介 - Map 控制項和 UI

尚未有邦友留言

標記使用者