tab切换,在地图上展示多个marker

var school =[
					[{
						"post_title":"xxxxx","ID":"changping","jingdu":"xxx","weidu":"xxxx",
						"xAddress":"xxxx ","xTell":"****"
					}]
				];

	var point = [{"city":"北京市东小口镇","zoom":11},{"city":"香河县","zoom":8},{"city":"寿光市","zoom":8},{"city":"山西省","zoom":8},{"city":"合肥市","zoom":8}];

	var map = new BMap.Map("allmap");
	map.centerAndZoom('北京市东小口镇',11);
	schoolMarker(0);
	$("#schoolList ul").eq(0).show().siblings().hide();
	$("#city li").click(function() {
		$(this).addClass('selected').siblings().removeClass('selected');
		$("#schoolList ul").eq($(this).index()).show().siblings().hide();
		map.centerAndZoom(point[$(this).index()].city,point[$(this).index()].zoom);
		map.enableScrollWheelZoom(true);

		map.clearOverlays();
		schoolMarker($(this).index());
	});

	function schoolMarker(x) {
		$.each(school[x],function(i,item) {
			var point = new BMap.Point(item.jingdu,item.weidu);
			var marker = new BMap.Marker(point);
			map.addOverlay(marker);

			marker.addEventListener('mouseover', function() {
				var info = infomsg(item);
				var infoWin = new BMap.InfoWindow(info);
				this.openInfoWindow(infoWin);
			});
		});
	}
	
	function infomsg(item) {
		var msg = '';
		msg += '  <div><ul class="itemli">';
		msg += '     <li>' + item.post_title + '</li>';
		msg += '     <li>地址:' + item.xAddress + '</li>';
		if (item.xTell) {
			msg += '     <li>联系方式:' + item.xTell + '</li>';
		}
		msg += '     <li><a href="' + item.ID + '.htm" target="_blank">详情 >></a></li>';
		msg += '  </ul></div>';
		return msg;
	}

  根据坐标添加,切换的时候注意清除坐标,map.clearOverlays();

 

转载于:https://www.cnblogs.com/wlingling2017/p/7868068.html

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值