全宽触发式地图

001.png


如图所示:

在地图全宽的时候,当然页面下滑到一定程序,鼠标在地图上时进行滑轮滚动操作会触发地图的缩放,而不会进行浏览器页面的上下滚动,用户体验就不好。所以需要做一个触发式地图来提升用户体验。


操作方式:

鼠标点击地图任意一处,激活地图,可以对地图进行缩放,拖拽。鼠标移出地图区域,禁用地图,地图将不可操作。


原理:

其实很简单,就是在地图上面添加一层透明的遮罩提示层,当鼠标点击时隐藏该层并使其点击穿透,鼠标移出时恢复该层即可。


涉及技术:

也是非常简单基础的HTML+CSS+jQuery。


实现步骤:

一、HTML代码

<div class="map">
    <div>{*content:content*}</div>
    <div class="uk-flex uk-flex-center uk-flex-middle uk-text-center tm-transition shade"><span>点击使用地图</span></div>
</div>

注:写模板的时候使用了uikit框架,class样式中的部分样式名自行参照uikit框架手册研究吧,主要作用就是使提示语水平垂直居中。

说明:

首先,{*content:content*}是直接调用的文章内容,在后台编辑器直接插入百度地图即可。

然后,在地图下面添加了一层遮罩和提示语。


二、CSS代码

.map { position: relative; }
.map .shade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); cursor: pointer; }
.map .shade.out { opacity: 0; pointer-events: none; }
.map .shade span { display: block; padding: 0.08rem; background: rgba(0,0,0,0.5); border-radius: 0.02rem; letter-spacing: 0.02rem; font-size: 0.14rem; color: #EEE; }

说明:

最外层.map相对定位,遮罩层.shade绝对定位,覆盖在上面,然后设定背景色和透明度。

.shade.out则是鼠标点击后将遮罩层变成透明的,再加上鼠标穿透。

.shade span则设置了提示语的样式。


三、jQuery代码

jQuery('.map .shade').on('click', function(){

    jQuery(this).addClass('out');

})

jQuery('.map').on('mouseleave', function(){

    jQuery(this).find('.shade').removeClass('out');

})

说明:

这是功能实现的关键,但也是比较简单基础的。

首先,.shade(遮罩层)点击的时候,给遮罩层添加样式.out,而.out就是我们在CSS中设置的点击后的样式。

然后,鼠标移出.map时,移出遮罩层的.out样式,也就是恢复地图不可使用。


总结:非常简单实用的一个功能,代码都是比较基础的,写代码的关键是思考。