百度地图API--标注域

标签: 百度地图 api | 发表时间:2014-03-29 17:00 | 作者:ysjian_pingcx
出处:http://blog.csdn.net
标注域
文本标注域

我们可以在地图上添加一些本文覆盖物,用来标注一些信息,前一节我们学习了标注点的使用以及标注点的点击和拖拽事件,标注点用到了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 查看评论

相关 [百度地图 api] 推荐:

百度地图API--HelloWorld

- - CSDN博客推荐文章
百度地图API--Hello World.           这里引用一个经典的单词"Hello World",这个词是程序界所有人都很熟悉的,我在开始学习Java的时候就是从这开始的,什么编写一个Hello World程序,甚至有的面试题中有“写一个输出Hello World的程序”来测试面试者的面向对象的思维.

百度地图API--标注域

- - CSDN博客Web前端推荐文章
我们可以在地图上添加一些本文覆盖物,用来标注一些信息,前一节我们学习了标注点的使用以及标注点的点击和拖拽事件,标注点用到了BMap命名空间下的Marker类,文本标注域则是用到了Label类,下面介绍如何添加一个文本标注域. position : map.getCenter(), // 指定文本标注所在的地理位置.

百度地图api之如何自定义标注图标

- - CSDN博客Web前端推荐文章
      在百度地图api中,默认的地图图标是一个红色的椭圆形. 但是在项目中常常要求我们建立自己的图标,类似于我的这个. 操作很简单,分如下几步进行. 步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存成png格式. 推荐一个在线ps网站 http://uupoop.com/. 做好图片之后,如果你使用vs或其他控制谈调用的百度地图api,要把图片放到debug文件夹中.

【百度地图API】如何批量转换为百度经纬度

- Pei - 博客园-首页原创精华区
     百度地图API的官网上提供了常用坐标转换的示例. 但是,一次只能转换一个,真的非常麻烦. 这里结合了官方的示例,自制一个批量转换工具,供大家参考. 因为我没有GPS坐标,就拿谷歌坐标做个示例了. 首先要注意的是,百度和谷歌的经纬度坐标顺序是相反的. 传入坐标转换接口的百度经纬度应该是. 所以,我建立一个数组,存放转换前的经纬度.

Api Blocking

- - xiaobaoqiu Blog
4.RateLimiter实现限流. 接口限流是保证系统稳定性的三大法宝之一(缓存, 限流, 降级).. 本文使用三种方式实现Api限流, 并提供了一个用Spring实现的Api限流的简单Demo, Demo的git地址: https://github.com/xiaobaoqiu/api-blocking.

百度地图推出卫星地图

- 丁丁 - 月光博客
  据百度地图微博报道,11月15日,百度地图正式上线卫星地图功能,目前首批覆盖的城市包括北京、上海、广州、深圳等35个城市,由中国四维提供影像数据.   卫星地图是百度地图新增加的地图浏览模式,目前用户可以在百度地图中选择使用“地图”、“卫星”和“三维”三种不同的视图. 通过新增的的“卫星地图”模式,用户可以看到真实的遥感卫星图像,查看到原有地图上无法涵盖的细节.

phonegap利用百度地图sdk定位

- - snoopyxdy的博客
近期的一个phonegap项目把我做的焦头烂额,最让人蛋疼的就是安卓4.1.x对html5的定位获取经纬度有个无比巨大的坑,一般我们利用如下代码进行html5的定位. 另外一个巨坑也直接影响了我对这个问题的判断,如果我重启了安卓4.1的机器,那么上述代码将能够正常跑大约几小时,甚至半天,可是到了第二天又会出现同样的问题,无尽的timeout.

股票API

- 狗尾草 - 博客园-首页原创精华区
股票数据的获取目前有如下两种方法可以获取:. http/javascript接口取数据. 1.http/javascript接口取数据. 以大秦铁路(股票代码:601006)为例,如果要获取它的最新行情,只需访问新浪的股票数据. 这个url会返回一串文本,例如:. var hq_str_sh601006="大秦铁路, 27.55, 27.25, 26.91, 27.55, 26.20, 26.91, 26.92, .

API 与 ABI

- Ant - A Geek&#39;s Page
(本文亦是《C语言编程艺术》中的一部分,所以请勿用于商业用途. 一些程序员居然对API和ABI这两个概念都不清楚,我感到有些惊讶. 这里以 Linux 内核为例简单解释一下. API,顾名思义,是编程的接口,换句话说也就是你编写“应用程序”时候调用的函数之类的东西. 对于内核来说,它的“应用程序”有两种:一种是在它之上的,用户空间的真正的应用程序,内核给它们提供的是系统调用这种接口,比如 read(2),write(2);另一种就是内核模块了,它们和内核处于同一层,内核给它们提供的是导出的内核函数,比如 kmalloc(),printk().

Google+ API发布

- 屁清新健脑 - Solidot
开发者终于等来了期待已久的Google+ API. Google正式发布了允许读取用户公开信息的API,开发者可以借助API开发与Google+交互的应用程序,或将其整合到网站上. Google社交网站发布2个月来,经历了用户暴涨,但也出现了热度下降. Google+ API的发布也许能给予它一个新动力.