发表日期:2017-02 文章编辑:小灯 浏览次数:1372
友情提示链接:ES6系列(一)迭代器、for-of循环和生成器 Generators
在HTML5的新标准中,有了用于地图的使用地理位置定位的api,其由geolocation 对象来进行担任相关的使用。
首先简单的介绍一下官方对于geolocation 对象的介绍:
geolocation
对象:地理位置 API,通过接口可以使用javascript定位当前用户所在位置,其是window对象中浏览器对象的内置对象(即由navigator.geolocation提供)。其允许用户向 Web 应用程序提供他们的位置。同时出于隐私考虑,报告地理位置前会先请求用户许可。如果该对象存在,那么地理位置服务可用。
下面附上用于判断兼容使用的JS和兼容浏览器:
if ("geolocation" in navigator) {/* 地理位置服务可用 */}else{/* 地理位置服务不可用 */}
geolocation
对象封装了获取当前用户所在位置的方法和属性,我们可以通过这些方法和属性进行我们需要的操作
window.navigator.geolocation;
如果不兼容获取的对象为null;
可以调用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无法访问。
可以设定一个回调函数来响应定位数据发生的变更(设备发生了移动,或获取到了更高精度的地理位置信息),通过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
Baidu地图同时提供了一组API接口,供其他软件公司使用,通过这些API接口,开发者也可以在自己的程序中嵌入百度地图。
我们常用的API接口分类:
一般的接口在开发时都是免费的,但在运营的时候都要收取费用。
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。
该套API免费对外开放。自v1.5版本起,需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制。
官网地址:http://developer.baidu.com/map/
JavaScript API大众版:http://developer.baidu.com/map/index.php?title=jspopular
主要功能如下:
- 基本地图功能:展示(支持2D图、3D图、卫星图)、平移、缩放、拖拽等。
<script src="http://api.map.baidu.com/api?v=1.5&ak=密钥" type="text/javascript"></script>
<div id=" myMap " style="width:500px;height:320px"></div>
//根据div的id= map的map构建地图内存对象。//BMap是百度地图类,封装了显示百度地图的方法和属性,参数为容器所对应的idvar map = new BMap.Map("myMap");map.enableScrollWheelZoom();//启用滚轮放大缩小
缩放等级介绍图:
缩放等级介绍图
var point = new BMap.Point(121.491, 31.233); // 显示地图,并设定地图等级 map.centerAndZoom(point, 3); //缩放等级
此类是地图API的核心类,用来实例化一个地图。以下多的API则截图给一些常用方法:
| 构造函数| 描述 |
| -
| Map(container:String或HTMLElement[, opts:MapOptions]) | 在指定的容器内创建地图实例,之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作 |
百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件,您还可以通过Control类来实现自定义控件。
- Control:所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
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());
删除控件:map.removeControl(control);
| 构造函数| 描述 |
| -
| setAnchor(anchor:enum ControlAnchor) | 设置控件停靠的位置 |
| getAnchor | 返回控件停靠的位置 |
其中setAnchor()方法的anchor允许的值为:
覆盖物:所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。
地图API提供了如下几种覆盖物:
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); //将标注添加到地图中
marker.addEventListener("click",function(){ alert("点击事件"); });
marker.enableDragging(); marker.addEventListener("dragend",function(e){ alert("当前位置:" +e.point.lng + ", " + e.point.lat); })
map.removeOverlay(marker);
信息窗口在地图上方的浮动显示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()); //打开信息窗口
marker.hide(); // 隐藏覆盖物 Marker.show(); // 显示覆盖
到这里关于HTML5的定位及地图,就介绍完毕了,希望大家能多多关注我,以后会慢慢为大家推出更好的其他web前端知识。
日期:2019-09 浏览次数:6088
日期:2019-09 浏览次数:4095
日期:2019-09 浏览次数:4896
日期:2019-09 浏览次数:9904
日期:2019-09 浏览次数:10040
日期:2019-09 浏览次数:3882
日期:2019-09 浏览次数:3498
日期:2019-09 浏览次数:3257
日期:2019-09 浏览次数:2977
日期:2019-09 浏览次数:3413
日期:2019-09 浏览次数:6708
日期:2019-09 浏览次数:3108
日期:2019-09 浏览次数:3601
日期:2019-09 浏览次数:3236
日期:2019-09 浏览次数:3288
日期:2019-09 浏览次数:3545
日期:2019-09 浏览次数:5154
日期:2019-09 浏览次数:2845
日期:2019-09 浏览次数:3910
日期:2019-09 浏览次数:3345
日期:2019-09 浏览次数:3540
日期:2019-09 浏览次数:3564
日期:2019-09 浏览次数:3067
日期:2019-09 浏览次数:3858
日期:2019-09 浏览次数:4960
日期:2019-09 浏览次数:4792
日期:2019-09 浏览次数:3004
日期:2019-09 浏览次数:8347
日期:2019-09 浏览次数:4105
日期:2019-09 浏览次数:3343
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.