侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

vue+elementui实现百度地图api滑上列表显示位置信息

前端  /  管理员 发布于 9个月前   297

最近因工作需要,需要制作滑上列表位置查询功能,小编用了 vue+elementui和百度地图api实现了一下效果 一起来看一下吧!

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="index.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak="></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
  
</head>
<body>
    <div id="app">
        <el-button type="text" @click="Ylyxx_Map_Opened">打开嵌套表单的 Dialog</el-button>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" top="6vh" width="80%">
            <div class="maps ylyxx_map_visible">
                <div id="map">
                </div>
                <div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="交通" name="first">
                            <span class="BMap_Marker BMap_noprint" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer;
                             background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;); 
                             width: 19px; height: 25px; left: 541px; top: 363px; z-index: -7983000;" title=""></span>
                            1323
                        </el-tab-pane>
                        <el-tab-pane label="医疗" name="second">
                            <ul>
                                     //存坐标点
                                <li data-a="117.006814,36.662209"><img
                                        src="https://www.yanglaocn.com/images/baidumapjt.png" alt=""><span>
                                       xxxx</span></li>
                                <li data-a="117.062871,36.65536"><img
                                        src="https://www.yanglaocn.com/images/baidumapjt.png" alt=""><span>
                                       xxxx</span></li>
                                <li data-a="117.006814,36.662209"><img
                                        src="https://www.yanglaocn.com/images/baidumapjt.png" alt=""><span>
                                        xxxx</span></li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="购物" name="third">购物</el-tab-pane>
                        <el-tab-pane label="购物" name="fourth">购物</el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-dialog>
    </div>
    <script>
        var point
        var marker
        var infoBox
        new Vue({
            el: '#app',
            data: {
                activeName: 'second',
                foo: "123",
                dialogFormVisible: false,
                map: "",
                form: {
                }
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                },
                //打开弹框
                Ylyxx_Map_Opened() {
                    this.dialogFormVisible = true
                    var that = this
                    setTimeout(function () {
                        that.getmap()
                        that.getmark()
                    }, 500)
               
                },
                //标注
                getmark(e, text) {
                    if(!e){
                        e="117.006814, 36.662209"
                        text="xxxxx)"
                    }
                    map.clearOverlays();
                    console.log(e.split(","))
                    point = new BMap.Point(e.split(",")[0], e.split(",")[1]);
                    marker = new BMap.Marker(point);        // 创建标注    
                    map.addOverlay(marker);
                    var html = [`<div><strong>${text}</strong><label></label></div>`];
                    infoBox = new BMapLib.InfoBox(map, html.join(""), {
                        boxStyle: {
                            width: "auto",
                            height: 'auto'
                        }
                        , offset: new BMap.Size(0, 20) // 向上偏移
                        , enableAutoPan: true
                        , closeIconUrl: false
                    });
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                    infoBox.open(marker);
                },
                getmap() {
                    // 百度地图API功能
                    var that = this
                    this.map = new BMap.Map("map");    // 
                    map = this.map
                    map.centerAndZoom(new BMap.Point(117.006814, 36.662209), 18);  // 初始化地图,设置中心点坐标和地图级别
                    //添加地图类型控件
                    map.addControl(new BMap.MapTypeControl({
                        mapTypes: [
                            BMAP_NORMAL_MAP,
                            BMAP_HYBRID_MAP
                        ]
                    }));
                    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
                    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放     var dis_obj_tab = "map";
                    var navigationControl = new BMap.NavigationControl({
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT// 靠左下角位置
                    })
                    map.addControl(navigationControl);
                    // map.enableScrollWheelZoom(true);     
                    $(".yl li").mouseover(function (e) {
                        var cc = $(this).attr('data-a')
                        var text = $(this).text()
                        that.getmark(cc, text)
                        // 鼠标悬停开启信息窗口
                    });
                    $("#pane-second").mouseout(function () {
                        // infoBox.close(); // 鼠标离开关闭信息窗口
                    });
                }
            },
            mounted() {
            }
        })
    </script>
</body>
<style>
    .infoBox img {
        display: none;
    }
    .yl {
        padding: 0;
    }
    .yl li {
        list-style: none;
        padding: 15px 0;
        display: flex;
    }
    .yl li span {
        padding: 13px 5px;
    }
    .yl li img {
        display: block;
    }
    .ylyxx_map_visible_L {
        float: left;
        width: calc(100% - 380px);
        height: 775px;
        /* background-color: #FFBE00; */
        position: absolute;
        top: -60px;
        left: -20px;
    }
    .ylyxxInfoBox {
        background: #fff;
        width: 230px;
        /* height: 130px; */
        padding: 15px 10px;
        line-height: 29px;
        box-sizing: border-box;
        font-size: 17px;
        display: block;
    }
    .ylyxx_map_visible {
        width: 100%;
        height: 685px;
        /* background-color: #F00; */
        position: relative;
    }
    .ylyxx_map_visible_R {
        float: right;
        width: 380px;
        height: 100%;
        /* background-color: #FF00FF; */
    }
</style>
</html>



  • 上一条:
    vue项目 vue-amap高德地图api回放轨迹源码
    下一条:
    锦绣中国,盛世华诞!zongscan.com网站祝祖国生日快乐!
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • uni-app在详情页中给电话信息添加点击拨打电话的功能按钮(0个评论)
    • uni-app开发小程序搜索功能及添加搜索历史记录、添加热门搜索关键词功能demo(0个评论)
    • uni-app开发小程序使用uni.getLocation()实现页面即时获取当前定位信息demo(1个评论)
    • uni-app开发小程序实现列表页条件筛选显示功能demo(0个评论)
    • vue+elementui实现百度地图api滑上列表显示位置信息(0个评论)
    • 近期文章
    • 在laravel框架中使用中间件 + 队列的方式记录请求日志(0个评论)
    • laravel框架常用速查表收集(0个评论)
    • go语言中查找最长不含有重复字符的字符串算法示例代码(0个评论)
    • laravel中where IN多列特殊查询类型代码示例(0个评论)
    • 使用Laravel Airdrop加速您的CI构建(0个评论)
    • go语言中日期时间戳比较功能示例代码(0个评论)
    • 来自一位国外前端程序员学习go语言的功能第三部分(0个评论)
    • Laravel9 Eloquent WHERE Like搜索查询示例代码(0个评论)
    • 在PHP中使用MQTT协议的流程步骤(0个评论)
    • PHP远程代码执行漏洞:mysqlnd拓展中存在堆缓冲区溢出漏洞修复方式建议(0个评论)
    • 近期评论
    • 博主 在

      centos7中Meili Search搜索引擎安装流程步骤中评论 @鹿   执行以下命令看看你的2.27版本是否存在strin..
    • 鹿 在

      centos7中Meili Search搜索引擎安装流程步骤中评论 这是我的错误提示,下载了对应的glibc-2.25.tar.gz后续按照教程操作..
    • 阿凡达123 在

      golang 怎么做热更新中评论 也可以看看这个:https://github.com/edwingeng/hot..
    • 博主 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..
    • GGGGGGGGG 在

      layui框架常用输入框介绍中评论 写的很好解决问题..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客