モバイル版Html5におけるBaidu地図のクリックイベント
2022-01-31 01:53:39
百度地図の公式説明によると、モバイルH5ページで聴くことができるのは以下の4つのイベントです。
タッチスタート、タッチムーブ、タッチチェンド、ロングプレス
また、マップがクリックイベントをリッスンしても、そのイベント内のコードはモバイル側では実行されません。
地図のtouchendイベントをリッスンして、地図をドラッグするとtouchend内のコードも実行される、という要件で作業していました。そこで、この問題を解決するために、zeptoのようなtapイベントをエミュレートする必要があるんです。
私のコードは
function initMap(baseData) {
var mp = new BMap.Map('map');
var point = new BMap.
baseData.data.gardenLongitude,
baseData.data.gardenLatitude
);
mp.centerAndZoom(point, 15);
// Save the touch object information
var obj = {};
mp.addEventListener('touchstart', function (e) {
obj.e = e.changedTouches ? e.changedTouches[0] : e;
obj.target = e.target;
obj.time = Date.now();
obj.X = obj.e.pageX;
obj.Y = obj.e.pageY;
});
mp.addEventListener('touchend', function (e) {
obj.e = e.changedTouches ? e.changedTouches[0] : e;
if (
obj.target === e.target &&
// greater than 750 can be seen as a long press
((Date.now() - obj.time) < 750) &&
// Apply the Pythagorean theorem, if the point of touchstart to the point of touchend is less than 15, it can be considered as a map clicked
(Math.sqrt(Math.pow(obj.X - obj.e.pageX, 2) + Math.pow(obj.Y - obj.e.pageY, 2)) < 15)
) {
// The map is clicked and some action is performed
doSomething();
}
});
}
以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層ご支援いただければ幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
キャンバスをベースにしたHTML5で電子署名を実現、PDF文書も生成可能
-
HTML5で音声や動画を読み込むためのコード
-
HTML5のmeta viewportパラメータの解析
-
html5動画の共通APIインタフェースの実例を紹介
-
html5でtype="range "属性のスライダー機能を実装する。
-
html5 postMessageのフロントエンドクロスドメインとフロントエンドのリスニング方式の例
-
HTML5サインイン機能
-
モバイルhtml5で長押しイベントをシミュレートする方法
-
html5 canvas 自動改行でテキストを描画するサンプルコード
-
HTML5 モバイルポップアップアニメーション効果