HTML5学习笔记（四）地图功能

一、HTML5中地理定位

地理定位功能并不是属于HTML5专有内容

HTML5的地理定位技术,由Google公司提供的Google Map产品来实现地理定位技术

但是中国国内不能使用Google公司所有服务和产品，所以选择百度地图和高德地图

百度地图市场份额大，所以我们学习使用百度地图

二、百度地图

百度地图开发网址 - http://developer.baidu.com/map/

百度地图提供的API帮助文档和Demo示例代码（易于使用）

三、如何使用百度地图

①在HTML页面中引入百度地图的JS代码

http://api.map.baidu.com/api?v=2.0&ak=秘钥

②定义显示地图的容器

③在javascript代码中创建百度地图Map对象

var map = new BMap.Map(容器id);

④进行地图的初始化

map.centerAndZoom();

四、百度地图的组件

核心类 - Map类

构造器 - BMap.Map(容器id);

方法

centerAndZoom() - 初始化方法

addControl() - 添加控件

addOverlay() - 添加标注

Control类 - 控件类

ScaleControl类 - 表示地图的比例尺

构造器 - 创建比例尺对象

NavigationControl类 - 表示移动缩放控件

构造器 - 创建移动缩放控件

Overlay类 - 遮盖物类

Marker类 - 表示地图的一个标注

构造器 - Marker(point)

Point类 - 标注类

<!DOCTYPE html>
<html>
 <head>
  <title>百度地图的相关组件</title>
  <meta charset="utf-8" />
  <script src="http://api.map.baidu.com/api?v=2.0&ak=此处写自己的秘钥"></script>
 </head>

 <body>
  <div id="allmap" style="width:800px;height:600px"></div>
  <script>
	var map = new BMap.Map("allmap");
	map.centerAndZoom("北京",12);
	/*
	 * 为百度地图添加控件
	 * Control类
	 * ScaleControl类 - 表示比例尺控件
	 * * 构造器 - ScaleControl()
	 * * 方法
	 *   * setUnit() - 设置比例尺的单位
	 *   * getUnit() - 获取比例尺的单位
	 * * 添加位置,默认为左下角
	 *   * 构造器的参数ScaleControlOptions类型
	 *     * anchor - 设置控件的停靠位置
	 *       * BMAP_ANCHOR_TOP_LEFT
	 *       * BMAP_ANCHOR_TOP_RIGHT
	 *       * BMAP_ANCHOR_BOTTOM_RIGHT
	 *       * BMAP_ANCHOR_BOTTOM_LEFT - 默认值
	 * 将创建的控件添加到百度地图中
	 * * 通过Map对象的addControl()方法
	 */
	// 创建比例尺控件对象
	var scale = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT});
	// 将比例尺控件添加到百度地图中
	map.addControl(scale);
	/*
	 * Control类 - 控件类
	 * NavigationControl类 - 表示地图的平移缩放控件
	 * * 构造器 - NavigationControl()
	 * Map对象移除控件 - removeControl()
	 */
	var nav = new BMap.NavigationControl();
	map.addControl(nav);
	/*
	 * Overlay类 - 地图的遮盖物
	 * Marker类 - 表示地图上一个图像标注
	 * * 构造器 - Marker(point)
	 *   * point - 标注的坐标值
	 * Map对象添加遮盖物
	 * * addOverlay(marker)
	 * Point类 - 表示一个地理坐标点
	 * * 构造器 - Point(lng,lat)
	 *   * lng - number类型,表示经度
	 *   * lat - number类型,表示纬度
	 * * 如何获取位置的经度和纬度值?
	 */
	var point = new BMap.Point(116.404, 39.915);
	// 创建地图标注
	var marker = new BMap.Marker(point);
	// 添加标注
	map.addOverlay(marker);
  </script>
 </body>
</html>

HTML5学习笔记（四）地图功能

猜你喜欢