前端简单实现类似于百度地图、高德地图、腾讯地图弹窗效果

最新推荐文章于 2024-05-08 21:39:03 发布

薛定谔的猫-菜鸟程序员

最新推荐文章于 2024-05-08 21:39:03 发布

阅读量2.3k

点赞数

分类专栏： ES6 文章标签：前端 jQuery 地图弹窗 JavaScript let

本文链接：https://blog.csdn.net/qq_36034945/article/details/89884474

版权

ES6 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前端简单实现类似于百度地图、高德地图、腾讯地图弹窗效果

在日常的开发当中，我们经常会遇到一些特殊需求，比如一个自定义的地图弹窗效果，使用自定义的背景图片等等，这样的需求我们该怎么做？
首先我们需要想想，做一个地图弹窗需要那些前端知识？
所需知识如下：

JavaScript的函数方法
JavaScript的for循环方法（注意使用let）
jQuery的position()方法（自动获取弹窗位置）
JavaScript的if方法（判断地图边界）

编程方案：
首先对地图进行点的标注，做好弹窗并隐藏，想办法获取到标注点的位置，并将位置赋予地图弹窗。
源码如下：
1、html+css部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/index_style.js"></script>
    <style>
        .tzc_cs{
            width: 1120px;
            height: 700px;
            margin: 0 auto;
            position: relative;
            background:url(../image/548745458.jpg) no-repeat;
            background-size: 100% 100%;
            border: 1px solid rgb(153, 152, 152);
        }
        .tzc_icon{
            width: 30px;
            height: 30px;
            /* background: red; */
            border-radius: 50%;
            margin-left: -15px;
        }
        .tzc_icon img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .tzc_icon_tc{
            width: 200px;
            height: 100px;
            background:rgba(255,255,255,0.75);
            display: none;
            color: black;
            border-right: 1px solid rgb(206, 203, 203);
            border-bottom: 1px solid rgb(206, 203, 203);
            font-size: 20px;
            text-align: center;
            line-height: 100px;
            margin-left: -100px;
        }
        .tzc_icon_tc a{
            text-decoration:none;
            color: black;
        }
        .i0{
            position: absolute;
            left: 20%;
            top: 5%;
        }
        .i1{
            position: absolute;
            left: 30%;
            top: 30%;
        }
        .i2{
            position: absolute;
            left: 50%;
            top: 60%;
        }
        .i3{
            position: absolute;
            left: 45%;
            top: 70%;
        }
        .i4{
            position: absolute;
            left: 80%;
            top: 80%;
        }
    </style>
</head>
<body>
    <div class="tzc_cs">
            <div class="tzc_icon i0"><img src="image/dangwei2.png" alt=""></div>
            <div class="tzc_icon i1"><img src="image/gonhui.png" alt=""></div>
            <div class="tzc_icon i2"><img src="image/tuanwei.png" alt=""></div>
            <div class="tzc_icon i3"><img src="image/dangwei1.png" alt=""></div>
            <div class="tzc_icon i4"><img src="image/dangwei2.png" alt=""></div>

            <div class="tzc_icon_tc c0"><a href="">马雪云</a></div>
            <div class="tzc_icon_tc c1"><a href="">胡玉坤</a></div>
            <div class="tzc_icon_tc c2"><a href="">张四五</a></div>
            <div class="tzc_icon_tc c3"><a href="">李元张</a></div>
            <div class="tzc_icon_tc c4"><a href="">牛夏普</a></div>
    </div>
</body>
</html>

2、JavaScript部分源码

//地图弹窗方法
    function maptc(c1,c2,class_2) {
        for (let i = 0; i < c1.length; i++) {
            for (let j = 0; j < c2.length; j++) {
                if (i==j) {
                    c1.eq(i).on("click",function(){
                        var position = c1.eq(i).position();
                        var top = position.top;
                        var left = position.left;
                        if(top<=50){
                            c2.eq(j).css({"position":"absolute","top":top+40,"left":left}).fadeToggle().siblings(class_2).css({"display":"none"});
                        }else if(left<=50){
                            c2.eq(j).css({"position":"absolute","top":top-110,"left":left+140}).fadeToggle().siblings(class_2).css({"display":"none"});
                        }else if(left>=1070){
                            c2.eq(j).css({"position":"absolute","top":top-110,"left":left-140}).fadeToggle().siblings(class_2).css({"display":"none"});
                        }else{
                            c2.eq(j).css({"position":"absolute","top":top-110,"left":left}).fadeToggle().siblings(class_2).css({"display":"none"});
                        };
                    });
                };  
            };
        };
    };

最终效果如下：
在这里插入图片描述

薛定谔的猫-菜鸟程序员

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端简单实现类似于百度地图、高德地图、腾讯地图弹窗效果

前端简单实现类似于百度地图、高德地图、腾讯地图弹窗效果在日常的开发当中，我们时长会遇到一些特殊需求，比如一个自定义的地图弹窗效果，使用自定义的背景图片等等，这样的需求我们该怎么做？首先我们需要想想，做一个地图弹窗需要那些前端知识？所需知识如下：JavaScript的函数方法JavaScript的for循环方法（注意使用let）jQuery的position()方法（自动获取弹窗位置）...
复制链接

扫一扫