模拟点击触发 mapv 的 click 事件
实验方法和思路：
在 mapv 顶部覆盖了一个 div.box，点击 box 时获取 event 对象，拷贝一份推送给 mapv 的事件触发层。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 百度地图 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script> <!-- mapv --> <script src="http://mapv.baidu.com/build/mapv.min.js"></script> <style> html, body { margin: 0; padding: 0; height: 100%; } #app { width: 100%; height: 100%; } .box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); opacity: .5; } </style> </head> <body> <div id="app"></div> <div class='box'></div> </body> <script> const map = window.map = new BMap.Map("app") // 创建地图实例 const point = new BMap.Point(105.403119, 38.028658) // 开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); // 创建点坐标（东莞全貌） map.centerAndZoom(new BMap.Point(113.843319, 22.921901), 11) // 地图自定义样式 map.setMapStyle({ styleJson: [{ "featureType": "water", "elementType": "all", "stylers": { "color": "#031628" } }, { "featureType": "land", "elementType": "geometry", "stylers": { "color": "#000102" } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#000000" } }, { "featureType": "highway", "elementType": "geometry.stroke", "stylers": { "color": "#147a92" } }, { "featureType": "arterial", "elementType": "geometry.fill", "stylers": { "color": "#000000" } }, { "featureType": "arterial", "elementType": "geometry.stroke", "stylers": { "color": "#0b3d51" } }, { "featureType": "local", "elementType": "geometry", "stylers": { "color": "#000000" } }, { "featureType": "railway", "elementType": "geometry.fill", "stylers": { "color": "#000000" } }, { "featureType": "railway", "elementType": "geometry.stroke", "stylers": { "color": "#08304b" } }, { "featureType": "subway", "elementType": "geometry", "stylers": { "lightness": -70 } }, { "featureType": "building", "elementType": "geometry.fill", "stylers": { "color": "#000000" } }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": { "color": "#857f7f" } }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": { "color": "#000000" } }, { "featureType": "building", "elementType": "geometry", "stylers": { "color": "#022338" } }, { "featureType": "green", "elementType": "geometry", "stylers": { "color": "#062032" } }, { "featureType": "boundary", "elementType": "all", "stylers": { "color": "#465b6c" } }, { "featureType": "manmade", "elementType": "all", "stylers": { "color": "#022338" } }, { "featureType": "label", "elementType": "all", "stylers": { "color": "#022338", "visibility": "off" } }] }); // 渲染气泡 var data = [ { geometry: { type: 'Point', coordinates: [113.781803, 23.018795], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.751333, 23.055512], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.671419, 22.829733], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.751333, 22.80255], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.695137, 22.928664], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.722012, 22.991651], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.863613, 23.012407], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [114.083799, 22.815639], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [114.019622, 22.976357], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [114.156073, 22.743368], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [114.172171, 22.858509], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.953929, 22.927227], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.697865, 23.057108], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.590931, 22.902194], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.794451, 23.114556], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.982863, 23.038418], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [114.006169, 22.873877], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [114.053139, 23.077823], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.561772, 23.044478], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.888136, 23.073522], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.655897, 23.110833], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.728911, 23.106046], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [114.078459, 23.027842], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.930131, 23.009216], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.646123, 23.002296], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.949558, 23.096017], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [114.177422, 22.978865], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.857692, 23.119342], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.593806, 22.98952], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.869765, 22.922434], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.820775, 22.911782], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [114.092257, 22.930422], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, { geometry: { type: 'Point', coordinates: [113.624851, 23.056576], }, fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)', count: Math.random() * 30 + 5 }, ] var dataSet = new mapv.DataSet(data); var options = { maxSize: 30, max: 30, minSize: 10, draw: 'bubble' } var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options) // 渲染文本 var textData = [ { text: '东城', geometry: { type: 'Point', coordinates: [113.781803, 23.018795] } }, { text: '莞城', geometry: { type: 'Point', coordinates: [113.751333, 23.055512] } }, { text: '虎门', geometry: { type: 'Point', coordinates: [113.671419, 22.829733] } }, { text: '长安', geometry: { type: 'Point', coordinates: [113.751333, 22.80255] } }, { text: '厚街', geometry: { type: 'Point', coordinates: [113.695137, 22.928664] } }, { text: '南城', geometry: { type: 'Point', coordinates: [113.722012, 22.991651] } }, { text: '寮步', geometry: { type: 'Point', coordinates: [113.863613, 23.012407] } }, { text: '塘厦', geometry: { type: 'Point', coordinates: [114.083799, 22.815639] } }, { text: '常平', geometry: { type: 'Point', coordinates: [114.019622, 22.976357] } }, { text: '凤岗', geometry: { type: 'Point', coordinates: [114.156073, 22.743368] } }, { text: '清溪', geometry: { type: 'Point', coordinates: [114.172171, 22.858509] } }, { text: '大朗', geometry: { type: 'Point', coordinates: [113.953929, 22.927227] } }, { text: '万江', geometry: { type: 'Point', coordinates: [113.697865, 23.057108] } }, { text: '沙田', geometry: { type: 'Point', coordinates: [113.590931, 22.902194] } }, { text: '石碣', geometry: { type: 'Point', coordinates: [113.794451, 23.114556] } }, { text: '横沥', geometry: { type: 'Point', coordinates: [113.982863, 23.038418] } }, { text: '黄江', geometry: { type: 'Point', coordinates: [114.006169, 22.873877] } }, { text: '企石', geometry: { type: 'Point', coordinates: [114.053139, 23.077823] } }, { text: '麻涌', geometry: { type: 'Point', coordinates: [113.561772, 23.044478] } }, { text: '茶山', geometry: { type: 'Point', coordinates: [113.888136, 23.073522] } }, { text: '中堂', geometry: { type: 'Point', coordinates: [113.655897, 23.110833] } }, { text: '高埗', geometry: { type: 'Point', coordinates: [113.728911, 23.106046] } }, { text: '桥头', geometry: { type: 'Point', coordinates: [114.078459, 23.027842] } }, { text: '东坑', geometry: { type: 'Point', coordinates: [113.930131, 23.009216] } }, { text: '道滘', geometry: { type: 'Point', coordinates: [113.646123, 23.002296] } }, { text: '石排', geometry: { type: 'Point', coordinates: [113.949558, 23.096017] } }, { text: '谢岗', geometry: { type: 'Point', coordinates: [114.177422, 22.978865] } }, { text: '石龙', geometry: { type: 'Point', coordinates: [113.857692, 23.119342] } }, { text: '洪梅', geometry: { type: 'Point', coordinates: [113.593806, 22.98952] } }, { text: '松山湖', geometry: { type: 'Point', coordinates: [113.869765, 22.922434] } }, { text: '大岭山', geometry: { type: 'Point', coordinates: [113.820775, 22.911782] } }, { text: '樟木头', geometry: { type: 'Point', coordinates: [114.092257, 22.930422] } }, { text: '望牛墩', geometry: { type: 'Point', coordinates: [113.624851, 23.056576] } }, ] var textDataSet = new mapv.DataSet(textData) var textMapvLayer = new mapv.baiduMapLayer(map, textDataSet, { draw: 'text', font: '14px Arial', fillStyle: 'white', shadowColor: 'yellow', shadowBlue: 10, zIndex: 11, shadowBlur: 10, methods: { click(e) { if (e) { alert(`模拟点击了文本：【${e.text}】`) console.log(20211112165108, e) } } } }) // 模拟点击函数 const mockClickMapv = (event, container) => { const evmouseclick = document.createEvent('HTMLEvents') evmouseclick.initEvent('click', false, true) for (const key in event) { try { evmouseclick[key] = event[key] evmousedown[key] = event[key] evmouseup[key] = event[key] } catch (err) { /* event 对象中部分属性是只读，忽略即可 */ } } container.dispatchEvent(evmouseclick) } document.querySelector('.box').addEventListener('click', e => { // mapv 容器下的第一个 div 就是事件的触发对象 const container = document.getElementById('app').firstElementChild // 模拟点击底部的 mapv mockClickMapv(e, container) }) </script> </html>
