码迷,mamicode.com
首页 > 其他好文 > 详细

使用百度地图——入门

时间:2015-06-11 17:09:15      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:js   百度地图   

创建地图对象

  创建点坐标

  初始化地图,设置中心点坐标和地图级别

  配置地图的其他功能:添加缩放控件、启用鼠标滑轮缩放功能


创建覆盖物对象

  创建标注对象

  设置标注的标题

  添加对象属性

  给标注添加事件监听函数

  将标注添加到地图中


       //在地图上标注所有的项目
		function markProjectOnMap() {
			$.ajax({
				url : ctxpath + "/projectInfoAction!markProjectOnMap.action",
				async : true,
				data : 's=' + Math.random(),
				type : "POST",
				dataType : 'json',
				success : function(response) {
					var items = eval("response");

					// 1.创建地图
					var map = new BMap.Map("container"); // 创建地图实例  (参数说明:元素/元素的类别/元素的id)
					//       var point = new BMap.Point(113.18, 23.10);    // 创建点坐标  (参数说明:1.经度 2.纬度)
					var point = new BMap.Point(104.114129, 37.550339);
					map.centerAndZoom(point, 5); // 初始化地图,设置中心点坐标和地图级别  (参数说明:1.中心坐标 2.地图缩放级别)

					map.addControl(new BMap.NavigationControl()); //添加缩放控件
					map.enableScrollWheelZoom();                  //启用鼠标滑轮缩放功能

					// 2.循环创建标注
					var markerTemp;
					var pointTemp;
					for ( var i = 0; i < items.total; i++) {
						var item = items.items[i];
						pointTemp = new BMap.Point(item.longitude,
								item.latitude);
						markerTemp = new BMap.Marker(pointTemp);           // 创建标注  (参数说明:坐标)  					                     
						markerTemp.setTitle(item.projectName);             // 设置标注的标题
						markerTemp.id = item.projectId;                    // 添加对象属性
						markerTemp.addEventListener("click", function(e) { // 给标注添加事件监听函数   
						  viewProjectInfo(this.id);
						});
						
						map.addOverlay(markerTemp); // 将标注添加到地图中
					}
				},
				error : function(response) {
					alert("获取地图坐标失败!");
				}
			});
		}

		$(function() {
			markProjectOnMap();
		});



参考:关于给覆盖物添加自定义的属性

截图:
技术分享

使用百度地图——入门

标签:js   百度地图   

原文地址:http://blog.csdn.net/b_qxzb/article/details/46457011

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!