モバイル H5 の百度地図のクリック イベントの紹介 (コード例)

不言
リリース: 2019-02-13 14:49:11
転載
3483 人が閲覧しました

この記事では、モバイル H5 のクリック イベント (コード例) を紹介します。必要な方は参考にしてください。

Baidu Maps の公式説明によると、モバイル H5 ページでは次の 4 つのイベントを監視できます:

touchstart、touchmove、touchend、longpress

モバイル H5 の百度地図のクリック イベントの紹介 (コード例)

そして、click イベントがマップ上で監視されている場合、 このイベントのコードはモバイル端末では実行されません。

以前リクエストしたとき、マップのタッチエンドイベントを監視していましたが、マップをドラッグするとタッチエンド内のコードも実行されるとは思いませんでした。したがって、この問題を解決するには、zepto のようなタップ イベントをシミュレートする必要があります。

私のコードは次のとおりです:

function initMap(baseData) {
    var mp = new BMap.Map('map');
    var point = new BMap.Point(
      baseData.data.gardenLongitude,
      baseData.data.gardenLatitude
    );

    mp.centerAndZoom(point, 15);

    // 保存 touch 对象信息
    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 &&
        
        // 大于 750 可看成长按了
        ((Date.now() - obj.time) <p class="comments-box-content"></p>
ログイン後にコピー

以上がモバイル H5 の百度地図のクリック イベントの紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート