使用百度地图根据点击不同的tab,显示不同的marker

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])
		}
	}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值