Introduction to the click event of Baidu Map in mobile H5 (code example)

The content of this article is an introduction to the click event (code example) of Baidu Map in mobile H5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

According to the official explanation of Baidu Maps, the following four events can be monitored in the mobile H5 page:

touchstart, touchmove, touchend, longpress

And if the click event is monitored on the map, the code in this event will not be executed on the mobile terminal.

When I made a request before, I monitored the touchend event for the map. I never thought that when I dragged the map, the code in the touchend was also executed. So you need to simulate a tap event like zepto to solve this problem.

My code is:

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>

The above is the detailed content of Introduction to the click event of Baidu Map in mobile H5 (code example). For more information, please follow other related articles on the PHP Chinese website!