vue+elementui实现百度地图api滑上列表显示位置信息
最近因工作需要，需要制作滑上列表位置查询功能，小编用了 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("http://api0.map.bdimg.com/images/blank.gif");
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>
相关文章