解决 百度地图js版在华为手机 addEventListener click 不兼容问题

gaiyi

最近在项目中开发了一个百度地图js版，之后遇到了在华为手机上监听点击事件失效的问题，其他手机暂未发现，在简书上找到了相关答案，感谢作者“没有昵称了吗”。。。把代码分享给大家。
原理：
通过监听touchstart和touchmove两个事件中，x1，y1和x2，y2的差值（绝对），如果大于10px那么认为是拖动，否则认为是点击。
修改后的代码如下，供参考：

1. Model.prototype.loadBaiduMap = function(city_name, county_name) {
   
2.                 var id = this.getIDByXID("baiduMap");
   
3.                 var self = this;
   
4.                 window._baiduInit = function() {
   
5.                         map = new BMap.Map(id);
   
6.                         // map.centerAndZoom(new BMap.Point(121.397428, 31.90923), 12);
   
7.                         // map.addControl(new BMap.MapTypeControl());
   
8.                         // map.setCurrentCity("北京");
   
9.                         // map.enableScrollWheelZoom("true");
   
10.                         var geolocation = new BMap.Geolocation();
    
11.                         geolocation.getCurrentPosition(function(r) {
    
12.                                 if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    
13.                                         if (self.latitude && self.longitude) {
    
14.                                                 self.isLocation = "1";
    
15.                                                 var point = new BMap.Point(self.longitude, self.latitude);
    
16.                                                 map.centerAndZoom(point, 11);
    
17.                                                 map.panTo(point);
    
18.                                                 map.addOverlay(new BMap.Marker(point));
    
19.                                                 self.setAddressData(point);
    
20.                                         } else {
    
21.                                                 self.isLocation = "";
    
22.                                                 map.centerAndZoom(r.address.city, 11);
    
23.                                                 map.panTo(r.point);
    
24.                                         }
    
25.                                 } else {
    
26.                                         alert('failed' + this.getStatus());
    
27.                                 }
    
28.                         }, {
    
29.                                 enableHighAccuracy : true
    
30.                         })
    
31.                         // 添加带有定位的导航控件
    
32.                         var top_right_navigation = new BMap.NavigationControl({
    
33.                                 anchor : BMAP_ANCHOR_BOTTOM_LEFT,
    
34.                                 type : BMAP_NAVIGATION_CONTROL_SMALL
    
35.                         // BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮
    
36.                         });
    
37.                         map.addControl(top_right_navigation);
    
38.                         var p = {
    
39.                                 x1 : 0,
    
40.                                 y1 : 0,
    
41.                                 x2 : 0,
    
42.                                 y2 : 0
    
43.                         };
    
44.                         map.addEventListener('touchstart', function(evt) {
    
45.                                 // console.log('X:', evt.touches[0].clientX)
    
46.                                 p.x1 = p.x2 = evt.touches[0].clientX;
    
47.                                 // console.log('Y:', evt.touches[0].clientY)
    
48.                                 p.y1 = p.y2 = evt.touches[0].clientY;
    
49.                         })
    
50.                         map.addEventListener('touchmove', function(evt) {
    
51.                                 // console.log('X:', evt.touches[0].clientX)
    
52.                                 p.x2 = evt.touches[0].clientX;
    
53.                                 // console.log('Y:', evt.touches[0].clientY)
    
54.                                 p.y2 = evt.touches[0].clientY;
    
55.                         })
    
56.                         map.addEventListener('touchend', function(e) {
    
57.                                 // 如果x轴或者y轴移动超过10px，那么认为是拖动，而不是点击（touch），使用绝对值保证左右上下移动都可以计算正确
    
58.                                 if (Math.abs(p.x1 - p.x2) < 10 || Math.abs(p.y1 - p.y2) < 10) {
    
59.                                         // alert('点击了地图')
    
60.                                         // console.log(p);
    
61.                                         map.clearOverlays();
    
62.                                         map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat))); // 增加点
    
63.                                         self.isLocation = "";
    
64.                                         self.setAddressData(e.point);
    
65.                                 } else {
    
66.                                         // alert('拖动了地图')
    
67.                                         // console.log(p);
    
68.                                 }
    
69.                         })
    
70.                         // 增加点击事件
    
71. //                        map.addEventListener("click", function(e) {// 该事件在部分华为手机上失效，其他手机暂未发现，解决方案是监听touch事件
    
72. //                                console.log("点击事件");
    
73. //                                map.clearOverlays();
    
74. //                                map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat))); // 增加点
    
75. //                                self.isLocation = "";
    
76. //                                self.setAddressData(e.point);
    
77. //                        });
    
78.                 };
    
79.                 require([ 'https://api.map.baidu.com/api?v=3.0&ak=你的ak&callback=_baiduInit' ], function() {
    
80.                         if (!(window.BMap && window.BMap.apiLoad)) {
    
81.                                 window._baiduInit();
    
82.                         }
    
83.                 });
    
84.         };

复制代码

伊醉芳羞

我试了怎么没效果呢

gaiyi

伊醉芳羞 发表于 2019-6-14 17:55
我试了怎么没效果呢

检查代码是否有误。或者贴出来代码我看下