使用百度地图——入门

创建地图对象

创建点坐标

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

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

创建覆盖物对象

创建标注对象

设置标注的标题

添加对象属性

给标注添加事件监听函数

将标注添加到地图中

       //在地图上标注所有的项目
		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();
		});

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

截图:

时间: 2024-10-30 16:01:59

使用百度地图——入门的相关文章

百度地图_api

这一天主要讲的是百度地图api的使用,由于百度有很详细的开发文档了,所以我这里只做一个大概的笔记 百度地图API的使用 1,入门 1.1,三大核心 ①SDKInitializer 整个百度的初始化工具类,引擎 ②MapView 用来显示地图的控件 ③baiduMap 相当于控制器,缩放,旋转,移动 1.2,准备工作(到百度地图LBS开放平台上查看) 获取API Key,按网上的帮助文档走步骤 获取SHA1码 百度地图的Key和应用是相互绑定的,一个Key对应一个应用. 1.3,创建工程拷贝jar

百度地图 JavaScript API极速版 开发体会

前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发者细分成普通web开发者和移动web开发者.正好用到了手机地图这块决定尝试一下.先看一下百度地图官方对它的定义.     本套百度地图API是专为手机浏览器提供的API,您可使用该套API,在手机页面中展示地图.标注位置.检索poi.查询线路等. 特点: 较同时兼容PC和手机浏览器的JavaScript API大众版而言,该版更适配移动设备,体积更小,加载地图速度更快,更省流

百度地图(1)

一.简介百度地图API: 1.简介: 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松访问百度服务和数据,构建功能丰富.交互性强的地图应用程序 2.功能: 百度地图移动版API不仅包含构建地图的基本接口,还提供了本地搜索.路线规划.地图定位等数据服务. 辅助内容:如何把地图展示出来,构建构建功能丰富.交互性强的地图应用程序 3.三大核心类: BmapManager:MapView :MapController 1)BmapManager: 百

百度地图 JavaScript API 极速版 开发体会

前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝试一下.先看一下百度地图官方对它的定义. 尊重劳动成功请保留原文地址:http://blog.csdn.net/lbsnews/article/details/29368879     本套百度地图API是专为手机浏览器提供的API,您可使用该套API,在手机页面中展示地图.标注位置.检索poi.查

C#调用百度地图API入门&amp;解决BMap未定义问题

本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于Android的百度地图,其实原理都差不多,希望文章对你有所帮助吧! 一. C#显示百度地图 使用C# Winform显示百度地图主要包括两个步骤: 1.调用百度地图API,通过申请的密钥AK访问JavaScript版本地图: 2.再在C#中webBrowser浏览器控件中访问JS文件,显示地图到窗口.

百度地图开发入门【不同图层及覆盖物】

上次我们一起完成了helloMap这个最基本的地图,这次我们来体验下不同视觉地图的魅力 1.了解地图的最基本管理类BaiduMap 方法很简单就是 mapview.getMap(); 然后我们来看一下里面的方法 官方文档这么说来着 void addHeatMap(HeatMap heatmap) 添加热力图 Overlay addOverlay(OverlayOptions options) 向地图添加一个 Overlay void animateMapStatus(MapStatusUpdat

百度地图API新手入门

最近,共享单车着实火了一把,市场竞争也是异常的激烈,百花争艳,百家争鸣,群雄逐鹿,最后鹿死谁手,现在还不得而知,不过可以肯定的是细节决定成败,更重要的还在于用户的体验. 用过的同学们都会知道,打开共享单车APP软件,即可看到以地图的形式展示车辆的分布情况以及离自己最近的车辆,这样就可以很方便很快速的找到车了,那么,这样的技术是如何实现的呢?之前也发过两篇关于百度地图API的文章,有网友评论说效果很好,我也说要持续更新的,结果呢,工作太忙,就把这事搁下了,今天呢,我们还是一起来重温一下百度地图的初

百度地图api入门介绍(js篇)

最近因为用到了百度地图的api,感觉还有点用记录一下,一方面充实一下自己,第二也希望有用到的同学可以参考一下:因为之前用过android baidu api  所以再用web  的感觉要比android  简单很多: 步骤: 1.申请秘钥   不多说,自己申请就好了: 2.引入百度地图,设置秘钥 3.编写  百度地图js  类   并且引入 3.这是我写的一个小demo  哈   位置是手机传递过来的具体位置 具体显示如下 最简单的demo  搭建完成  :     百度地图api  有详细步骤

ios 百度地图api 入门

百度地图api 官方教程: http://developer.baidu.com/map/index.php?title=iossdk 这个非常好, 很适合新手 CLLocationCoordinate 经纬度 BMKMapManager 地图驱动 BMKMapView 地图viewBMKPointAnotation 地图提示 BMKLocationService 定位服务