Advertisement

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)

还没有任何评论哟~