ตามคำอธิบายอย่างเป็นทางการของ Baidu Maps สามารถตรวจสอบเหตุการณ์ 4 เหตุการณ์ต่อไปนี้ได้ในหน้า H5 บนมือถือ:
touchstart, touchmove, touchend, กดแบบยาว
และหากมีการตรวจสอบเหตุการณ์การคลิกบนแผนที่ โค้ดในเหตุการณ์นี้จะไม่ถูกดำเนินการบนเทอร์มินัลมือถือ
เมื่อฉันสร้างข้อกำหนดก่อนหน้านี้ ฉันตรวจสอบเหตุการณ์ทัชเอนด์สำหรับแผนที่ ฉันไม่เคยคิดเลยว่าเมื่อฉันลากแผนที่ โค้ดในทัชเอนด์ก็จะถูกดำเนินการเช่นกัน ดังนั้นเราจึงจำเป็นต้องจำลองเหตุการณ์การแตะเช่นเดียวกับใน zepto เพื่อแก้ไขปัญหานี้
รหัสของฉันคือ:
ฟังก์ชั่น initMap (baseData) { var mp = new BMap.Map ('map'); var point = new BMap.Point ( baseData.data.gardenLongitude, baseData.data.gardenLatitude ); / บันทึกข้อมูลวัตถุสัมผัส 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.Y = obj.e.page ; }); mp.addEventListener('touchend', function (e) { obj.e = e.changedTouches ? e.changedTouches[0] : e; if (obj.target === e.target && // หากมากกว่า 750 คุณสามารถเห็นการเติบโตได้โดยการกด ((Date.now() - obj.time) < 750) && // ใช้ทฤษฎีบทพีทาโกรัส เพื่อตัดสินว่าจุด touchstart ไปถึงหรือไม่ หากจุด touchend น้อยกว่า 15 ถือว่าแผนที่ถูกคลิก (Math.sqrt(Math.pow(obj.X - obj.e.pageX, 2) + Math. ธาร(obj.Y - obj.e.pageY, 2)) < 15) ) { // คลิกแผนที่แล้ว ดำเนินการบางอย่าง (); } });
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network