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();


posted @ 2017-11-20 20:17  W_xiaobai  阅读(374)  评论(0编辑  收藏  举报