地図上のイベント制御について(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');
})