1.首先,获取全部的tab
$.ajax({
type: 'get',
url: '接口',
data: {
limit: 10,
page: 1
},
success: function(res) {
// 获取对应里院的信息
streetList = res.data;
yard(streetList, streetId)
// 1.获取所有街区
streetList.forEach((item, index) => {
let rotate = (index) * 30
streetCon += `
<span class='circle2_item' :class="[(index+1)==turn?'act':'act1']" :data-id="index"
style="transform:rotateZ(${rotate}deg">${item.streetName}</span>
`
})
$('.circle2').html(streetCon)
$('.circle2').children(':first').css({
"color": "#fff"
});
onloads();
// 2.点击街区的事件
let turn = streetList.length,
circle2 = 0;
$('.circle2_item').on('click', function() {
// 获取点击的索引
let index = $('.circle2_item').index($(this));
streetId = streetList[index].id;
yard(streetList, streetId) //点击街区获得里院
$('.circle2_item').css({
"color": "#000"
});
$(this).css({
"color": "#fff"
});
let x = index;
let i = turn - x;
let a;
let y = 1;
if (Math.abs(i) > (streetList.length / 2)) {
a = Math.abs(Math.abs(i) - streetList.length)
if (turn > x) {
a = -a
}
} else {
a = i
}
turn = x
circle2 = circle2 + a * 30
$(this).parent('.circle2').attr({
"style": `transform:rotate(${circle2}deg)`
})
})
}
})
2.根据tab,获得详细的二级tab,根据二级tab显示marker
let buildings = [];
function satelliteMap(street, streetId) {
$.ajax({
type: 'get',
url: '/api/screen/touch/buildingIntroList',
data: {
streetId: streetId == -1 ? street[0].id : streetId
},
success: function(res) {
buildings = res.data;
markers()
}
})
}
3.加载卫星地图和marker
var map = '';
function init() {
map = new BMapGL.Map("mapp");
map.centerAndZoom(new BMapGL.Point(120.327214, 36.077266), 16);
map.enableScrollWheelZoom(true);
map.setMapType(BMAP_EARTH_MAP);
$('.circle3').css('transform','scale(0)')
// 先获取第一个街区的里院
markers()
}
init();//一进页面获取卫星地图
function markers() {
if(map){
map.clearOverlays();
}
if (buildings.length) {
var point = []; //存放marker点的坐标
var marker = []; //存放标点对象的数组
for (var i = 0; i < buildings.length; i++) {
let log = buildings[i].longitude;
let lat = buildings[i].latitude;
point[i] = new BMapGL.Point(log, lat);
marker[i] = new BMapGL.Marker(point[i])
map.addOverlay(marker[i])
}
}
}