H5技术栈web前端

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

2017-02-11  本文已影响313人  侬姝沁儿

友情提示链接：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图、卫星图）、平移、缩放、拖拽等。

三·百度地图实战

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：所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
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提供了如下几种覆盖物：

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前端知识。

上一篇下一篇

猜你喜欢

热点阅读