コンテンツにスキップ

地図上のイベント制御について(v1)

PCとタッチデバイスでのイベントの制御について説明します。
例えば、クリックイベントはPCでは「click」、タッチデバイスでは「touchend」となります。
PC上のブラウザの場合はclickイベントをご利用いただき、スマホ上のブラウザの場合はtouchendイベントをご利用ください。

HTML(サンプルコード)
<div id="map"></div>
<style>
    #map {
        height: 400px;
        width: 700px;
        margin: 0 auto;
    }
</style>
JavaScript(サンプルコード)
// 地図を中心地の緯度経度を用意します
const center = new navitime.geo.LatLng('35.667395', '139.714896');
// 地図を用意します
const map = new navitime.geo.Map('map', center, 16, {
    bounds: new navitime.geo.BoundsInfo(0, $('#map').width(), 0, $('#map').height())
});

// PC上のブラウザの場合はclickイベントを使い、スマホ上のブラウザの場合はtouchendイベントを使います。
const CLICK_EVENT = ('ontouchend' in window) ? 
'touchend' : 'click';

// 地図上をクリックまたはタッチするとイベントが発生します。
navitime.geo.util.addListener(map, CLICK_EVENT, () => {
    alert('Event: cllck');
})

利用 API

利用地図スクリプト API