小歐ou | 菜鳥自救會

努力工作，用心學習

2020-06-01

HERE API 簡介 - 地圖事件

在 HERE API - 顯示地圖 文章中，顯示的地圖是預設的非互動式地圖，該地圖是靜態圖片，使用者無法拖動它來查看其他區域，也無法透過滑鼠點擊呈現不同的地圖畫面。而我們可以透過不同的地圖事件來實現地圖與使用者的互動。

地圖事件模組（mapsjs-events.js）透過標準化的方式，可以在不同瀏覽器用相同的方式很容易的開發互動和跨平台的應用程式，其事件的名稱仿造了 Microsoft 滑鼠、觸控、手寫筆等事件的用語，下表說明地圖事件：

事件 描述
pointerdown 表示指針（鼠標，手寫筆，觸控）點擊地圖表面或地圖對象；相當於事件類型mousedown，touchstart，pointerdown
pointerup 表示指針（鼠標，手寫筆，觸控）點擊後離開地圖表面或地圖對象；相當於事件類型mouseup，touchend，pointerup
pointermove 表示指針（鼠標，手寫筆，觸控）在地圖表面或地圖對像上移動；相當於事件類型mousemove，touchmove，pointermove
pointerenter 表示指針（鼠標，手寫筆，觸控）已進入地圖對象區域；相當於事件類型mouseenter，touchenter，pointerenter
pointerleave 表示指針（鼠標，手寫筆，觸控）已離開地圖對象區域；相當於事件類型mouseleave，touchleave，pointerleave
pointercancel 表示瀏覽器已取消正在進行的指針（鼠標，手寫筆，觸摸）操作；等同於事件類型：touchcancel，pointercancel
dragstart 表示在地圖或地圖對像上開始（鼠標，手寫筆，觸摸）拖動操作
drag 表示正在對地圖或地圖對象正在進行（鼠標，手寫筆，觸摸）拖動操作
dragend 表示在地圖或地圖對像上（鼠標，手寫筆，觸摸）拖動操作已完成
tap 表示指針（鼠標，手寫筆，觸摸）已經短暫觸摸了地圖表面或地圖對象；等同於事件類型click和tap
dbltap 表示短時間內連續執行了兩個具有相同指針的敲擊事件
longpress pointerdown指示在指針目標上發生了事件，沒有pointerup觸發任何事件，並且指針停留了較長時間

實際在網頁中要加入地圖事件，有以下步驟

  • 加入 mapjs-events.js
  • 建立地圖對象
  • 實例化 MapEvents Class
  • 將事件監聽加入到地圖

以下程式碼說明如何加入 mapjs-events.js

<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-mapevents.js"
       type="text/javascript" charset="utf-8"></script>
</head>

下面的程式碼主要是從建立地圖對像開始，然後實例化 H.mapevents.MapEvents，最後向地圖加入針對 tap 事件的監聽器。

// 初始化 map
var map = new H.Map(...);

// 在 map instance 啟用 event system
var mapEvents = new H.mapevents.MapEvents(map);

// 加入事件監聽器
map.addEventListener('tap', function(evt) {
    // 顯示 'tap' 和 'mouse' 事件
    console.log(evt.type, evt.currentPointer.type); 
});

啟用預設的地圖事件 Maps API mapevents 可以完全支援地圖互動，例如平移，縮放和縮放。透過 H.mapevents.Behavior，並利用事件系統抽象，參考以下程式碼可以輕鬆實現地圖互動，並可確保地圖對鼠標，手寫筆和觸控輸入可做出互動反應。

// 初始化 map
var map = new H.Map(...);

// 在 map instance 啟用 event system
var mapEvents = new H.mapevents.MapEvents(map);

// 加入事件監聽器
map.addEventListener('tap', function(evt) {
    // Log 'tap' and 'mouse' events:
    console.log(evt.type, evt.currentPointer.type);
});

// 提供 mapEvents 對象:
var behavior = new H.mapevents.Behavior(mapEvents);

參考資料：

HERE API - Map Events

BloggerAds