分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 移动互联 » 互联网络 » 制作一款简单的地图点击交互效果
  • 制作一款简单的地图点击交互效果

  • 下载地址
  • 之前我们介绍了利用百度地图名片功能制作一个属于自己的企业地址,那么现在如果你愿意折腾的话,可以利用下面这个交互效果让你的地址不再单调。

    首先我们看看这个效果:
    制作一款简单的地图点击交互效果-BanYuner

    那么这个效果就是当你的鼠标移动到了指定的地方之后,背景图片就会改变,效果方面还是不错的。

    接下来就是代码展示部分:

    <section class="interactive-points" id="interactive-1" tabindex="0">
    <img class="static" src="img/map.png" alt="Map of London" />
    <div class="backgrounds">
    <div class="background__element" style="background-image: url(img/1.jpg)"></div>
    <div class="background__element" style="background-image: url(img/2.jpg)"></div>
    <!--...-->
    </div>
    <svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
    <path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
    <path class="point" d="..."/>
    <!--...-->
    </svg>
    <div class="points-tooltips">
    <div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
    <div class="point-tooltip"><!--...--></div>
    <!--...-->
    </div>
    <div class="points-content">
    <div class="point-content">
    <h3 class="point-content__title">The Rupert Connection</h3>
    <p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
    <p class="point-content__text">Descended from astronomers...</p>
    </div>
    <div class="point-content">
    <!--...-->
    </div>
    <!--...-->
    </div>
    </section>
    

    整个代码非常明确的分工,分为四个部分,一个就是默认的背景图,一个就是通过SVG设定的地标,一个就是对应地标的图标,最后一个就是地标图片的相关文字说明以及tooltip:

    默认背景代码

    <img class="static" src="img/map.png" alt="Map of London" />
    

    对应地标图片

    <div class="backgrounds">
    <div class="background__element" style="background-image: url(img/1.jpg)"></div>
    <div class="background__element" style="background-image: url(img/2.jpg)"></div>
    <!--...-->
    </div>
    

    SVG地标

    <svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
    <path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
    <path class="point" d="..."/>
    <!--...-->
    </svg>
    

    地标图片的相关文字说明以及tooltip

    <div class="points-tooltips">
    <div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
    <div class="point-tooltip"><!--...--></div>
    <!--...-->
    </div>
    <div class="points-content">
    <div class="point-content">
    <h3 class="point-content__title">The Rupert Connection</h3>
    <p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
    <p class="point-content__text">Descended from astronomers...</p>
    </div>
    <div class="point-content">
    <!--...-->
    </div>
    <!--...-->
    </div>
    

    那么代码部分也分得比较明确了,有兴趣的用户可以利用这个做一个单独的页面,可以用来作为一个时光轴页面或者别的介绍页面,是一个比较实用的展示页面。

    下面再附上几张官方图片:
    制作一款简单的地图点击交互效果-BanYuner

    制作一款简单的地图点击交互效果-BanYuner

    制作一款简单的地图点击交互效果-BanYuner

    另外,此部分代码是可以修改的:

    /**
    * PointsMap options/settings.
    */
    PointsMap.prototype.options = {
    // Maximum opacity that the background element of 
    // a point can have when active (mouse gets closer to it)
    maxOpacityOnActive : 0.3,
    // The distance from the mouse pointer to 
    // a point where the opacity of the background element is 0
    maxDistance : 100, 
    // If viewportFactor is different than -1, then maxDistance 
    // will be overwritten by [point?s parent width / viewportFactor]
    viewportFactor : 9,
    // When the mouse is [activeOn]px away from 
    // one point, its image gets opacity = point.options.maxOpacity.
    activeOn : 30
    };
    

    上面的代码部分不在本文中,需要下载整体文件之后自行搜索在修改,这里附上官方的DEMO以及下载地址:

    DEMO: http://tympanus.net/Development/InteractivePoints/

    下载地址: http://tympanus.net/Development/InteractivePoints/InteractivePoints.zip

    如果无法下载或者下载过慢,下面的百度盘也提供了下载。

    下载地址

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    制作一款简单的地图点击交互效果

    支付宝(点击图片切换)

    扫码,支持我

    制作一款简单的地图点击交互效果

    微信(点击图片切换)

    扫码,手机看

    制作一款简单的地图点击交互效果
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    制作一款简单的地图点击交互效果
    9 + 1 =