项目需求，安卓、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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
