Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "html5 how to set Baidu Map Click event". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "html5 how to set Baidu Map Click event" can help you solve the problem.

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

Touchstart, touchmove, touchend, longpress

If the click event is monitored on the map, the code in the event will not be executed on the mobile side.

When I was doing a requirement, I listened to the touchend event for the map. I didn't expect to execute the code in touchend when I dragged the map. So you need to simulate a tap event like that 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 & & / / > 750visible growth is judged by ((Date.now ()-obj.time) < 750) & / / apply Pythagorean Theorem if the point from touchstart to touchend is less than 15. It can be regarded as a map 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 () This is the end of the content about "how to set up Baidu Map Click event by html5". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.