一、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=秘钥
②定义显示地图的容器
<div id="" style=""></div>
③在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>