友情提示链接：ES6系列（一）迭代器、for-of循环和生成器 Generators
在HTML5的新标准中，有了用于地图的使用地理位置定位的api，其由geolocation 对象来进行担任相关的使用。
一、简介
首先简单的介绍一下官方对于geolocation 对象的介绍：
geolocation对象：地理位置 API，通过接口可以使用javascript定位当前用户所在位置，其是window对象中浏览器对象的内置对象（即由navigator.geolocation提供）。其允许用户向 Web 应用程序提供他们的位置。同时出于隐私考虑，报告地理位置前会先请求用户许可。如果该对象存在，那么地理位置服务可用。
下面附上用于判断兼容使用的JS和兼容浏览器：
if ("geolocation" in navigator) {
/* 地理位置服务可用 */
}else{
/* 地理位置服务不可用 */
}
二、使用：
geolocation 对象封装了获取当前用户所在位置的方法和属性，我们可以通过这些方法和属性进行我们需要的操作
（1）获取geolocation 对象方式：
window.navigator.geolocation;
如果不兼容获取的对象为null；
（2）获取当前定位：
可以调用getCurrentPosition()函数获取用户当前定位位置。这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。
语法：navigator.geolocation.getCurrentPosition(success,error,options)
参数：
success：成功得到位置信息时的回调函数，使用Position对象作为唯一的参数。
error：可选，获取位置信息失败时的回调函数，使用PositionError对象作为唯一的参数，这是一个可选项。
options：可选，一个可选的PositionOptions对象。
当定位被确定后，定义的回调函数success就会被执行。第二个回调函数error，当有错误时会被执行。第三个参数options也是可选的，您可以通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位。
window.navigator.geolocation.getCurrentPosition(function (position) {
do_something(position.coords.latitude,position.coords.longitude); // 自定义的一个函数do_something
});
上述示例中，当获取位置后do_something()函数会被执行。
关于失败的回调函数其是以PositionError为第一个参数。
functionerrorCallback (error) {
alert('ERROR('+error.code+'): '+error.message);
};
注：目前谷歌提供的js的api无法访问。
（3）监视定位：
可以设定一个回调函数来响应定位数据发生的变更（设备发生了移动，或获取到了更高精度的地理位置信息），通过watchPosition()函数实现该功能（即Geolocation.watchPosition()用于注册监听器，在设备的地理位置发生改变的时候自动被调用）。它与getCurrentPosition()接受相同的参数，但回调函数会被调用多次。错误回调函数与getCurrentPosition()中一样是可选的，也会被多次调用。
var watchID = navigator.geolocation.watchPosition(function(position){
do_something(position.coords.latitude,position.coords.longitude);
});
去除监视：
Geolocation.watchPosition()方法会返回一个 ID，如要取消监听可以通过Geolocation.clearWatch()传入该 ID 实现取消的目的。
navigator.geolocation.clearWatch(watchID);
注：可以直接调用
watchPosition()函数，不需要先调用getCurrentPosition()函数。
附上watchPosition 实际使用示例:http://www.thedotproduct.org/experiments/geo/
再附上相关代码即相关网站地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation
二·百度地图
1．简介：
Baidu地图同时提供了一组API接口，供其他软件公司使用，通过这些API接口，开发者也可以在自己的程序中嵌入百度地图。
我们常用的API接口分类：
- web开发类：提供面向web开发的地图接口
- Android开发类：提供Android开发的各种接口。
- IOS开发类：提供IOS开发的各种接口。
- 其他服务接口：包含云服务、车联网服务等接口。
- 工具支持：API控制台、云编辑器等。
一般的接口在开发时都是免费的，但在运营的时候都要收取费用。
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
该套API免费对外开放。自v1.5版本起，需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。
2.获取密钥
官网地址：http://developer.baidu.com/map/
JavaScript API大众版:http://developer.baidu.com/map/index.php?title=jspopular
3.功能简介
主要功能如下：
- 基本地图功能：展示（支持2D图、3D图、卫星图）、平移、缩放、拖拽等。
- 地图控件展示功能：可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件，并可以设置各类控件的显示位置。
- 覆盖物功能：支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等；开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能。
- 工具类功能：提供经纬度坐标与屏幕坐标互转功能；开源库里提供测距、几何运算及GPS坐标/国测局坐标转百度坐标等功能。
- 定位功能：支持IP定位及浏览器（支持html5特性浏览器）定位功能。
- 右键菜单功能：支持在地图上添加右键菜单。
- 鼠标交互功能：支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能。
- 图层功能：支持重设地图底图、地图上叠加实时交通图层或自定义图层功能。
- 本地搜索功能：包括根据城市、矩形范围、圆形范围等条件进行POI搜索；且支持用户自有数据的检索。
- 公交检索：支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索；检索结果支持便捷、可换乘、少步行、不乘地铁四种方案。
- 驾车检索：支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索；返回最短时间、最短距离、避开高速的驾车导航结果；且提供计算打车费用服务。
- 步行导航：提供步行导航方案。
- 逆/地理编码：支持百度坐标与地址描述信息之间的转换服务。
- 个性化数据展示功能：用户自有数据存储到LBS.云后，JavaScript API可以提供以麻点图形式展示自有数据功能。
三·百度地图实战
1.入门程序
（1）引入baidu地图的javascrpt文件（http路径访问百度地图api官网）
<script src="http://api.map.baidu.com/api?v=1.5&ak=密钥" type="text/javascript"></script>
（2）编写html代码（百度地图会根据id设定div中的内容）：
<div id=" myMap " style="width:500px;height:320px"></div>
（3）调用api初始化地图
//根据div的id= map的map构建地图内存对象。
//BMap是百度地图类，封装了显示百度地图的方法和属性，参数为容器所对应的id
var map = new BMap.Map("myMap");
map.enableScrollWheelZoom();//启用滚轮放大缩小
缩放等级介绍图:
缩放等级介绍图
（4）构建在地图上要显示的区域中心点位置121.491, 31.233可以理解为横坐标和纵坐标，即经度纬度
var point = new BMap.Point(121.491, 31.233);
// 显示地图，并设定地图等级
map.centerAndZoom(point, 3); //缩放等级
2.核心API
（1）Map类：
此类是地图API的核心类，用来实例化一个地图。以下多的API则截图给一些常用方法：
a.构造函数
| 构造函数 | 描述 |
| -
| Map(container:String或HTMLElement[, opts:MapOptions]) | 在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作 |
b.配置方法
c.获取地图状态的API
d.修改地图状态的API
（2）控件：
百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过Control类来实现自定义控件。
a.地图API中提供的控件：
- Control：所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
- NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
- OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
- MapTypeControl：地图类型控件，默认位于地图右上方。
- CopyrightControl：版权控件，默认位于地图左下方。
- GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方
b.引入控件：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());
可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
c.删除控件：
删除控件:map.removeControl(control);
d.修改控件：
| 构造函数 | 描述 |
| -
| setAnchor(anchor:enum ControlAnchor) | 设置控件停靠的位置 |
| getAnchor | 返回控件停靠的位置 |
其中setAnchor()方法的anchor允许的值为：
- BMAP_ANCHOR_TOP_LEFT表示控件定位于地图的左上角。
- BMAP_ANCHOR_TOP_RIGHT表示控件定位于地图的右上角。
- BMAP_ANCHOR_BOTTOM_LEFT表示控件定位于地图的左下角。
- BMAP_ANCHOR_BOTTOM_RIGHT表示控件定位于地图的右下角。
（3）覆盖物：
a.简介
覆盖物：所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
地图API提供了如下几种覆盖物：
- Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
- Marker：标注表示地图上的点，可自定义标注的图标。
- Label：表示地图上的文本标注，您可以自定义标注的文本内容。
- Polyline：表示地图上的折线。
- Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
- Circle:表示地图上的圆。
- InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。
- 标注：标注表示地图上的点。API提供了默认图标样式
b.创建标注
var map = new BMap.Map(“map");
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); //创建标注
map.addOverlay(marker); //将标注添加到地图中
c.注册事件
marker.addEventListener("click",function(){
alert("点击事件");
});
d.可拖拽标注
marker.enableDragging();
marker.addEventListener("dragend",function(e){
alert("当前位置：" +e.point.lng + ", " + e.point.lat);
})
e.删除标注（删除其他覆盖物调用同样的方法）
map.removeOverlay(marker);
f.信息窗口：
信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态
打开窗口：
var opts = {
width: 250, //信息窗口宽度
height:100, //信息窗口高度
title: "Hello" //信息窗口标题
}
var infoWindow = new BMap.InfoWindow("<input type = 'button' value='按钮'>", opts); //创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); //打开信息窗口
g.隐藏与显示
marker.hide(); // 隐藏覆盖物
Marker.show(); // 显示覆盖
结语：
到这里关于HTML5的定位及地图，就介绍完毕了，希望大家能多多关注我，以后会慢慢为大家推出更好的其他web前端知识。
