做网站要有什么团队,加工平台设计,乐思网络舆情监测系统,小程序解析wordpress背景
在官网项目中#xff0c;需要使用一个地图#xff0c;展示产品的分布区域及数量。希望的交互是#xff0c;鼠标放上标点#xff0c;tooltip展示地点和数量等信息。鼠标滚动#xff0c;则页面随着滚动。但是鼠标事件是被地图代理了的#xff0c;鼠标滚动意味着地图的…背景
在官网项目中需要使用一个地图展示产品的分布区域及数量。希望的交互是鼠标放上标点tooltip展示地点和数量等信息。鼠标滚动则页面随着滚动。但是鼠标事件是被地图代理了的鼠标滚动意味着地图的缩放。
问题解决
我们首先想到的就是关闭地图的缩放 const scene new Scene({id: map,map: new GaodeMap({zIndex: 0,pitch: 0,style: light,center: [36.753416,33.142173],zoom: 1,rotateEnable: false,zoomEnable: false, // 关闭地图缩放dragEnable: false // 关闭拖拽}),logoVisible: false,})这个设置了之后我们发现鼠标在地图上是滚不动的状态就是我们无论如何滚动鼠标页面都没有动静。其实就是我们的鼠标事件被地图给代理了但是他这里没有处理我们禁用了缩放和拖拽之后将鼠标事件脱离代理。
然后我们就开始想解决办法
在地图上套一层空的蒙层 这样解决了滚动但是我们不能影响鼠标的hover效果 所以蒙层这个方案不太可行。。。。。重写鼠标事件 我们去翻API文档发现了他️抛出鼠标事件的监听回调 我们要用的就是这个鼠标滚动的事件mousewheel当找到这个事件的第一时间其实我也是不知道怎么去做的一直在思考怎么让它动起来我能想到使用scrollTop 去做但是实在想不到每次该改变多少方向如何。这其实就是因为我不知道deltaY这个属性的存在。最后老大给我说有个属性可以知道鼠标滚动的量一查就是这玩意儿。前辈果然还是前辈经验是什么都换不来的。当然还是自己接触的太少了学习的不够。 最后的解法scrollTop deltaY scene.on(mousewheel, (ev) {document.documentElement.scrollTop ev.originEvent.deltaY})小结
以此记录一下这个问题的解决办法也加深一下自己对这个属性的了解。
