web前端-在迷惘中的探索HTML5（一）定位及地图

友情提示链接：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接口分类：

1. web开发类：提供面向web开发的地图接口
2. Android开发类：提供Android开发的各种接口。
3. IOS开发类：提供IOS开发的各种接口。
4. 其他服务接口：包含云服务、车联网服务等接口。
5. 工具支持：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

百度官网截图1
百度官网截图2

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

获取地图状态的API

d.修改地图状态的API

修改地图状态的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允许的值为：

1. BMAP_ANCHOR_TOP_LEFT表示控件定位于地图的左上角。
2. BMAP_ANCHOR_TOP_RIGHT表示控件定位于地图的右上角。
3. BMAP_ANCHOR_BOTTOM_LEFT表示控件定位于地图的左下角。
4. 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前端知识。