百度地图华为手机 addEventListener click 不兼容解决

最新推荐文章于 2023-05-26 11:13:54 发布

程序员大柱

最新推荐文章于 2023-05-26 11:13:54 发布

阅读量776

点赞数 1

文章标签：百度 js javascript vue jquery

本文链接：https://blog.csdn.net/smile14174/article/details/115752257

版权

问题：

项目中的使用了百度地图，前端在监听点击事件的时候是使用 map.addEventListener('click',function(){...})，苹果手机和小米手机均能出发该事件，但是华为手机确无法出发，或者偶尔用两个手指点击会触发(几率非常小)。后来通过几个博客了解到touch事件(本人后端程序员，对前端不太了解)。

原理：

通过监听touchstart和touchmove两个事件中，x1，y1和x2，y2的差值(绝对)，如果大于10px那么认为是拖动，否则认为是点击。
修改后的代码如下，供参考：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
    <!-- <script>var vConsole = new VConsole();</script> -->
    <title>Document</title>
</head>

<body>


    <div id="sch-box" class="sch-box">
        <div class="sch-input-cont">

            <input id="searchText" class="borderradius-3 sch-input" type="search" placeholder="请输入您车所在的位置">

            <span id="schInputDel"></span>
        </div>
    </div>
    <div id="login_address">
        <a class="address-search" id="address-search" href="javascript:;">
            <span class="address-searchfont">
                点击定位当前位置
            </span>
        </a>
    </div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    <div id="allmap"></div>

    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=wrQtcxmVhln7DH3Ozx8RRK1xreYVIaT2"></script>
    <!--加载鼠标绘制工具-->

    <script type="text/javascript">
        var map;
        var geoc = new BMap.Geocoder();
        var myValue;
        $(function () {
            var p = { x1: 0, y1: 0, x2: 0, y2: 0 };
            $(".footers").hide();
            $("html").css("background-color", "#f5f5f5");

            var height = $(window).height() - 146;
            $("#allmap").css("height", height + 'px');

            map = new BMap.Map("allmap");
            var point = new BMap.Point(116.331398, 39.897445);
            map.centerAndZoom(point, 14);
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            
//主要内容 S
            map.addEventListener('touchstart', function (evt) {
                // console.log(evt)
                console.log('X:', evt.touches[0].clientX)
                p.x1 = p.x2 = evt.touches[0].clientX;
                console.log('Y:', evt.touches[0].clientY)
                p.y1 = p.y2 = evt.touches[0].clientY;
            })
            map.addEventListener('touchmove', function (evt) {
                console.log('X:', evt.touches[0].clientX)
                p.x2 = evt.touches[0].clientX;
                console.log('Y:', evt.touches[0].clientY)
                p.y2 = evt.touches[0].clientY;
            })
            map.addEventListener('touchend', function (evt) {
                //如果x轴或者y轴移动超过10px，那么认为是拖动，而不是点击(touch)，使用绝对值保证左右上下移动都可以计算正确
                if (Math.abs(p.x1 - p.x2) < 10 || Math.abs(p.y1 - p.y2) < 10) {
                    alert('点击了地图')
                    console.log(p);
                }else{
                    alert('拖动了地图')
                    console.log(p);
                }
            })
//主要内容 E
            map.addEventListener('click', function () { console.log('touch2') })//该事件在部分华为手机无法出发，其他手机暂未发现
        })

    </script>

</body>

</html>