ホームページ  >  記事  >  ウェブフロントエンド  >  モバイル H5 の百度地図のクリック イベントの紹介 (コード例)

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

不言
不言転載
2019-02-13 14:49:113468ブラウズ

この記事では、モバイル 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 までご連絡ください。