iT邦幫忙

0
鐵人賽 神助攻 HERE Technologies

HERE MAP API系列文章Part1 - Basemap Setup

  • 分享至 

  • xImage
  •  

HERE 官網有一個很有趣的Tutorial, Who wants ice cream !?
如果你註冊了HERE Developer 帳號,很可能會看到這個教學的小廣告,不曉得你是否也跟著做了一遍?
假設你是冰淇淋店的老板,那麽用HERE Map 做個交互式的地圖小網頁,邊測試邊記錄

  1. 準備資料
    準備如下結構的目錄和文件
    https://ithelp.ithome.com.tw/upload/images/20200908/20129797PHqT3H9lbY.jpg
  2. 設計頁面
    HTML 的 head 中引用 HERE Map JS API 以及必要的 CSS;
    https://ithelp.ithome.com.tw/upload/images/20200908/20129797fkW5npNGeO.jpg
    HTML的 body 中需要至少包含一個div ,用於作為地圖顯示的容器; 以及引用js來完成 map 的規定動作。
    https://ithelp.ithome.com.tw/upload/images/20200908/20129797V2Fwbjsc1U.jpg
  3. 交互式地圖底圖
    a. 從HERE Developer 網站申請帳號,獲取 APPID 和 APPCODE ,在初始化服務時使用
    https://ithelp.ithome.com.tw/upload/images/20200908/20129797LtDNKRU5LG.jpg
    b. 創建 Map 對象,並指定初始化時的位置、顯示級別、底圖樣式…… everything as you wish……
    https://ithelp.ithome.com.tw/upload/images/20200908/20129797jrnDYMW07H.jpg
    c. 讓地圖動起來,至少可以平移縮放,很簡單的一段即可
    https://ithelp.ithome.com.tw/upload/images/20200908/20129797BwwSHscci7.jpg
  4. 給地圖中心加個圖標, 換成一個自定義的也成
    https://ithelp.ithome.com.tw/upload/images/20200908/20129797we1AcFDXNi.jpg
    TIPS 加個event listener可以在你改變窗口尺寸的時候,自動更新地圖的尺寸
    https://ithelp.ithome.com.tw/upload/images/20200908/20129797x3zJjh6481.jpg

original resource Part1: Basic Map Set-up
complete code Github - kikitaMoon/HERE_JS_Who_Wants_Icecream
• 作者: Xiaoyan Mu
• 部落格連結: https://www.kikitamap.com/2019/03/05/Icecream_Part1_Basemap_Setup/
• 著作權: The author owns the copyright, please indicate the source reproduced.


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言