vue+elementui实现百度地图api滑上列表显示位置信息-侯体宗的博客

vue+elementui实现百度地图api滑上列表显示位置信息
前端 / 管理员发布于 1年前 579
最近因工作需要，需要制作滑上列表位置查询功能，小编用了 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条评论 (评论内容有缓存机制,请悉知!)