js 百度地图 点击覆盖物,弹出自定义弹窗,弹窗有轮播图
发布时间
阅读量:
阅读量
//这里使用swiper实现轮播功能 swiper 的安装请自行去查找
//从全局获得BMap和map
let BMap = this.BMap;
let map = this.map;
// 设置弹窗的大小
var opts = {
width: 355,
height: 330
//title:弹出层的标题
};
//定位弹窗的位置
let point = new BMap.Point(lng, lat);
//把需要轮播的图片拿出来循环补齐代码,vue那些绑定是无效的,需要用类似JQ的的方式处理
//html代码
let html = "";
this.style_diagram_list.map((item) => {
html += " <div class='swiper-slide'> " +
"<img src=" + item + "></div>"
})
let viewWin = "<div style='width:334px;height:430px;margin-top:10px;'>" +
"<div class='swiper-container'><div class='swiper-wrapper'>" +html +"</div>"+
"<div class='swiper-button-prev swiper-button-white'></div>"+
"<div class='swiper-button-next swiper-button-white'></div>"+
"</div>\n" +
" </div>";
//利用百度地图的API InfoWindow ,将viewWin和opts 传入
let infoWindow = new BMap.InfoWindow(viewWin, opts);
map.openInfoWindow(infoWindow, point);
全部评论 (0)
还没有任何评论哟~
