js百度地图marker与swiper轮播图联动

来源：互联网发布：网络教育退学编辑：程序博客网时间：2024/06/04 20:02
项目需求，安卓、ios引入webview地图内容与轮播联动，效果与百度题图wabapp效果相同，调用自己数据，地图里面放坐标，地图下部放轮播，并且单击maker坐标时候轮播图滑到相应位置，滑动轮播图，相应坐标弹出信息
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1,user-scalable=no">    <title>Document</title>    <link rel="stylesheet" href=".js/swiper.css"/>    <script type="text/javascript" src=".js/flexible.js"></script>    <script type="text/javascript" src=".js/jquery.js"></script>    <script type="text/javascript" src=".js/swiper.min.js"></script>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=不给你看"></script>    <style type="text/css">      #map {        height: 100%;      }      *{margin: 0;padding: 0;}      html, body {        height: 100%;        margin: 0;        padding: 0;      }      .swiper-container{        position: absolute;        bottom: .8rem;        left: 0.4rem;        right: 0.4rem;        height: 2.666667rem;      }      .swiper-slide {         text-align: center;         font-size: 18px;         background: #fff;         display: flex;         padding: 0.266667rem;        box-sizing: border-box;        border: 1px solid #ddd;      }      .swiper-slide .img{        width: 2.666667rem;        height: 2.133333rem;      }      .swiper-slide .img img{        width: 100%;        height: 100%;      }      .swiper-slide .cont{        flex:1;        display:flex;        flex-direction:column;        justify-content:space-between;        text-align: left;        padding: 0 0.266667rem 0 0.4rem;      }      .swiper-slide .cont p{        line-height: 0.613333rem;        font-size: 13px;      }      [data-dpr="2"] .swiper-slide .cont p {          font-size: 26px;      }      [data-dpr="3"] .swiper-slide .cont p {          font-size: 39px;      }      .swiper-slide .cont p.title{        font-size: 15px;      }      [data-dpr="2"] .swiper-slide .cont p {          font-size: 30px;      }      [data-dpr="3"] .swiper-slide .cont p {          font-size: 45px;      }      .swiper-slide .cont p.money{        display:flex;        justify-content:space-between;      }      .ellipsis{        overflow: hidden;        word-wrap: break-word;        white-space: normal;        word-break: break-all;        display: -webkit-box;        -webkit-box-orient: vertical;        -webkit-line-clamp: 1;      }      .star-pic{        width: 2.173333rem;        height: 0.346667rem;        background: url('./css/imgs/star0.png') no-repeat;        background-size: 100% 100%;        display: inline-block;        vertical-align: middle;        margin-right: 0.133333rem;      }      .star-pic i{        background: url('./css/imgs/star.png')no-repeat;        display: inline-block;        height: 0.346667rem;        overflow: hidden;        vertical-align: top;        background-size: auto 100%;      }    </style></head><body>    <div id="map"></div>    <div class="swiper-container">        <div class="swiper-wrapper">        </div>    </div></body><script type="text/javascript">    var map,        mData = [],        swiper,        markerbox = [],//存标记        contentbox = [],//存内容        opts = {          width : 100,     // 信息窗口宽度          height: 50,     // 信息窗口高度        };    var latitude = <?=$latitude?>;//获得当前位置    var longitude = <?=$longitude?>;//获得当前位置    function initMap() {       //初始化地图      map = new BMap.Map("map");      var pointer = new BMap.Point(longitude,latitude);      map.centerAndZoom(pointer, 12);      //初始化控制件      map.addControl(new BMap.MapTypeControl());      map.enableScrollWheelZoom(true);      //标记      var marker = new BMap.Marker(pointer);        map.addOverlay(marker);        //获得数据      $.post("接口地址",{latitude:latitude,longitude:longitude},function(data){        mData = data;        var html = '';        for (let i = 0; i < data.length; i++) {          var point = new BMap.Point(data[i].Lng, data[i].Lat);          var content = data[i].Title;          contentbox.push(content);          addMarker(point,content);          html += '<div class="swiper-slide">'                  +'<div class="img">'                    +'<img src="'+data[i].Img+'" alt="'+data[i].Title+'" />'                  +'</div>'                  +'<div class="cont ellipsis">'                    +'<p class="title ellipsis">'+data[i].Title+'</p>'                    +'<p><span class="star-pic">'                      +'<i style="width: '+data[i].star*20+'%"></i>'                    +'</span></p>'                    +'<p class="ellipsis">'+data[i].Category+'</p>'                    +'<p class="money">'                      +'<span>$<span>'+data[i].Percapita+'</span>/人</span>'                      +'<span>'+data[i].Distance+'</span>'                    +'</p>'                  +'</div>'                +'</div>';        }        //初始化swiper        $(".swiper-wrapper").html(html);        swiper = new Swiper('.swiper-container', {            slidesPerView: 1,            paginationClickable: true,            spaceBetween: 30,            onClick: function (swiper){              var pid = data[swiper.activeIndex].Pid;              startFunction(pid)            },            //轮播滑动回调            onSlideChangeEnd: function(swiper){              var Lat = data[swiper.activeIndex].Lat;              var Lng = data[swiper.activeIndex].Lng;              tocenter(Lng,Lat)            }        });      })     }    //重置中心，弹窗    function tocenter(longitude,latitude){      var obj = mData.filter(function (ele,index) {        return (ele.Lng == longitude) && (ele.Lat == latitude)      })[0];      var index = mData.indexOf(obj);      var point = new BMap.Point(longitude,latitude);         var infoWindow = new BMap.InfoWindow(contentbox[index],opts);       map.openInfoWindow(infoWindow,point);       var pointer = new BMap.Point(longitude,latitude);      map.setCenter(pointer);    }    //安卓ios调用交互    function startFunction(pid) {      window.AndroidWebView.showInfoFromJs(pid)    }    //添加标记    function addMarker(point,content){      var marker = new BMap.Marker(point);      map.addOverlay(marker);      markerbox.push(marker)      addClickHandler(content,marker);    }    //监听marker单击事件    function addClickHandler(content,marker){        marker.addEventListener("click",function(e){        var p = e.target;        var lng = p.getPosition().lng;        var lat = p.getPosition().lat        sliedeto(lng,lat);        openInfo(content,e);      });    }    //弹窗    function openInfo(content,e){      var p = e.target;      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);         var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象       map.openInfoWindow(infoWindow,point); //开启信息窗口    }    //点标记改变轮播    function sliedeto(lng,lat){      var obj = mData.filter(function (ele,index) {        return (ele.Lng == lng) && (ele.Lat == lat)      })[0];      swiper.slideTo(mData.indexOf(obj), 1000, false);    }    initMap()</script></html>
阅读全文
0 0