According to the official explanation of Baidu Maps, the following 4 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 requirement before, I monitored the touchend event for the map. I never thought that when I dragged the map, the code in touchend would also be executed. So we need to simulate a tap event like the one in 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); / / Save touch object information 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 && // If it is greater than 750, you can see the growth by pressing ((Date.now() - obj.time) < 750) && // Apply the Pythagorean theorem to judge, if the touchstart point reaches If the touchend points are less than 15, it can be regarded as the map being clicked (Math.sqrt(Math.pow(obj.X - obj.e.pageX, 2) + Math.pow(obj.Y - obj.e.pageY, 2)) < 15) ) { // The map is clicked, perform some operations doSomething(); } }); }
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.