百度地图API--标注域

标注域

文本标注域

我们可以在地图上添加一些本文覆盖物，用来标注一些信息，前一节我们学习了标注点的使用以及标注点的点击和拖拽事件，标注点用到了BMap命名空间下的Marker类，文本标注域则是用到了Label类，下面介绍如何添加一个文本标注域。

/*
	 * 添加文本标注 	
	 */
	function addTextMarker(map) {
		var opts = {
			position : map.getCenter(), // 指定文本标注所在的地理位置
			offset : createSize(30, -30) // 设置文本偏移量,createSize方法在Global.js中
		}
		var label = new BMap.Label("欢迎使用百度地图，我是简单的文本标注~", 
opts); // 创建文本标注对象
		label.setStyle({
			color : "red",
			fontSize : "12px",
			height : "20px",
			lineHeight : "20px",
			fontFamily : "微软雅黑"
		});
		map.addOverlay(label);
}

除了可以在地图上添加固定的文本域，还可以给特定的位置添加热区域，当鼠标放到这个位置的时候就会展示出来，鼠标移开后隐藏。

/*
	 * 添加热区 	
	 */
	function addHotArea(map) {
		//在长安大学添加一个热区,鼠标放上，会出现提示文字
		var hotSpot = new BMap.Hotspot(map.getCenter(), {
			text : "Hello，这里是长安大学，欢迎来自五湖四海的学习前来就读噢~",
			// 设置缩放比例区间，不在此区间时，热区不会显示
			minZoom : 8,
			maxZoom : 18
		});
		map.addHotspot(hotSpot);
}

行政区划
我们可以在地图上标注出中国的的所有的行政区域，其实思路很简答，就是拿到地方的边界，然后以边界的所有点作为多边形的点，添加一个多边形覆盖物。

/*
	 * 获取行政区边界，封装成方法
	 */
	function getBoundary(map, city) {
		var bdary = new BMap.Boundary();
		bdary.get(city, function(rs) { //获取行政区域
			var count = rs.boundaries.length; //行政区域的边界的点数
			for (var i = 0; i < count; i++) {
				//建立多边形覆盖物
				var ply = new BMap.Polygon(rs.boundaries[i], {
					strokeWeight : 2,
					strokeColor : "#ff0000"
				});
				map.addOverlay(ply); //添加覆盖物
			    //map.setViewport(ply.getPath()); //调整视野         
			}
		});
}
	/*
	 * 添加边界
	 */
	function addBoundary(map) {
		map.clearOverlays(); //清除地图覆盖物       
		getBoundary(map, '湖北');
		getBoundary(map, '北京');
		getBoundary(map, '上海');
		getBoundary(map, '四川');
		getBoundary(map, '重庆');
		getBoundary(map, '西安');
		getBoundary(map, '武汉');
		getBoundary(map, '渭南');
		getBoundary(map, '黄石');
		getBoundary(map, '排市');
}

圆
往地图添加圆用到了BMap.Circle类，只需要指定圆心和周长。

/*
	 * 添加圆	
	 */
	function addCircle(map) {
		var circle = new BMap.Circle(map.getCenter(), 500);
		map.addOverlay(circle);
}

多边形
往地图中添加多边形用到了BMap.Polygon类，形式跟上一节介绍的折线相似。

	/*
	 * 添加多边形	
	 */
	function addPolygon(map) {
		var xiAnPosition = map.getCenter();
		var hangzhouPosition = new BMap.Point(120.129721, 30.314429);
		var taiwanPosition = new BMap.Point(121.491121, 25.127053);
		var polygon = new BMap.Polygon([ xiAnPosition, hangzhouPosition,
				taiwanPosition ], {
			strokeColor : "red",
			strokeWeight : 5,
			strokeOpacity : 0.5
		});
		map.addOverlay(polygon);
}

矩形

矩形就是特殊的多边形，添加方式是一样的，只不过要获取能够成矩形的四个点需要一定的技巧。

/*
	 * 添加矩形
	 */
	function addRectangle(map) {
		var pStart = new BMap.Point(108.921636, 34.238584);
		var pEnd = new BMap.Point(108.941636, 34.278584);
		map.centerAndZoom("西安", 13);
		var polygon = new BMap.Polygon([
				new BMap.Point(pStart.lng, pStart.lat),
				new BMap.Point(pEnd.lng, pStart.lat),
				new BMap.Point(pEnd.lng, pEnd.lat),
				new BMap.Point(pStart.lng, pEnd.lat) ], {
			strokeColor : "red",
			strokeWeight : 6,
			strokeOpacity : 0.5
		});
		map.addOverlay(polygon);
}

文章来源： http://blog.csdn.net/ysjian_pingcx/article/details/22471973

作者：ysjian_pingcx 发表于2014-3-29 9:00:23 原文链接

阅读：162 评论：0 查看评论