1 地理位置定位 Geolocation
Geolocation
接口是一个用来获取设备地理位置的可编程的对象,它可以让Web内容访问到设备的地理位置,这将允许Web应用基于用户的地理位置提供定制的信息。简单来说:Geolocation
就是用来获取到当前设备的 经纬度(位置)
1.1 如何获取地理定位
我们可以通过 navigator
获取到 geolocation
位置对象
var Geolocation = navigator.geolocation;
console.log(Geolocation);//得到一个位置对象 Geolocation {}
Geolocation
对象本身不包含任何属性和方法。所以我们看到的是一个空对象,但在他的原型上包含了下列三个方法,通过这三个方法我们可以获取当前所在的经纬度,监听当前设备的移动,以及移出监听
Geolocation.getCurrentPosition()
Geolocation.watchPosition()
Geolocation.clearWatch()
注意:这三个方法只在https协议下有效,浏览器不允许不被信任的网站调用涉及用户隐私信息的api。
1.2 获取设备当前所在的经纬度
我们可以通过调用 Geolocation
对象的 getCurrentPosition
方法来获取当前设备所在的经纬度,该方法需要三个参数:
- success 成功得到位置信息时的回调函数,使用
Position
对象作为唯一的参数。 - error 可选参数 获取位置信息失败时的回调函数,使用
PositionError
对象作为唯一的参数。 - options 可选参数 一个可选的
PositionOptions
对象。(稍后会解释这个对象的用处)
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('你当前的位置在:');
console.log('经度 :' + crd.longitude);
console.log('纬度 :' + crd.latitude);
};
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
navigator.geolocation.getCurrentPosition(success, error, options);
1.2.1 成功回调
success 方法 使用Position
对象作为唯一的参数。它包含了两个属性 coords
和 timestamp
coords
表示地理状态,我们所需要的经纬度就从它里边获取,还包含其他的位置信息,感兴趣的自行摸索timestamp
表示获取到位置信息的时间戳
1.2.2 失败回调
error 方法接收一个 Error
参数作为错误信息说明 。它包含了两个属性 code
和 message
- code 返回错误码。可能拥有下列值:
-
PERMISSION_DENIED
该页面没有获取地理位置信息的权限。PERMISSION_UNAVAILABLE
至少有一个内部位置源返回一个内部错误(可以理解为由于设备的问题获取位置失败)。TIMEOUT
获取地理位置超时
- message 返回错误描述信息
1.2.3 PositionOptions 对象
该对象是获取位置信息的一些参数设置,如,是否采取高精度模式,是否设置超时时间等,它包含了三个参数
- enableHighAccuracy (Boolean值)true 表示返回设备能获取到的最精确的位置,默认为false
- timeout (数值型,单位是毫秒)获取位置信息的超时时间,默认是
Infinity
,即一直等待直到获取到位置信息位置 - maximumAge( 数值型,单位是毫秒)是否允许返回 单位时间内的缓存地址信息,默认是
0
,即不适用缓存,获取实时位置信息
1.3 监听设备位置改变
watchPosition
用来创建一个监听设备位置信息改变的事件。该方法会返回一个 Id
该方法的参数 等同于 getCurrentPosition
var id, options;
function success(pos) {
var crd = pos.coords;
console.log('位置移动了,你当前的位置在:');
console.log('经度 :' + crd.longitude);
console.log('纬度 :' + crd.latitude);
}
function error(err) {
console.warn('错误信息(' + err.code + '): ' + err.message);
}
options = {
enableHighAccuracy: false,
timeout: 5000,
maximumAge: 0
};
id = navigator.geolocation.watchPosition(success, error, options);
1.4 取消位置监听
clearWatch
方法用来取消位置监听 , watchPosition
方法返回的 Id
就是在这里使用;
// ...
id = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch(id);
// ...
2. 引入第三方地图
以百度地图为例,演示如何引入第三方地图
2.1 创建应用及秘钥获取
- 登陆百度地图开发平台后打开控制台
- 选择
应用管理
分类下的我的应用
- 在
我的应用
中选择创建应用
- 然后 按下图步骤填写相关信息即可创建一个地图应用,应用名称自己起名,类型分为服务端,小程序端,安卓,ios和 浏览器端,这里根据需求选择浏览器端,然后填写允许访问的网址白名单,* 代表允许所有来源的网站访问,最后点提交就可以了
- 应用创建完成之后就自动生成了密钥,我们可以复制该密钥用于后续的使用
2.2 引入文件地图插件
在创建好应用之后就可以引入百度地图的文件,上一步获取到的密钥就是在这里使用
2.2.1 地图插件版本
百度地图 web端api 有两个大的版本,普通版和GL版,GL版比普通版多了3D展示效果
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=上一步获取到的密钥"></script> // 引入普通版地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=上一步获取到的密钥"></script>引入带有3D效果的地图
2.3 创建地图
地图插件会导出一个地图对象 BMapGl (3d版本的地图,2d导出的为BMap),我们所有的操作都是基于这个对象实现的
2.3.1 地图初始化
使用 BMapGL
的 Map
方法初始化地图,该方法需要一个元素id
作为参数,并在该元素里创建地图
2.3.2 创建坐标点
使用 BMapGL
的 Point
方法创建一个地图的坐标点,接收两个参数(经度,纬度)
2.3.4 设置地图中心及放缩等级
使用 地图实例对象
的 centerAndZoom
方法设置地图的中心应该显示什么位置
该方法接收两个参数:
- Point (Point 对象) 该点为地图要显示的中心店
- zoom (number) 设置地图的放缩等级
var map = new BMapGL.Map("container"); // 使用 Map 方法创建地图实例 var point = new BMapGL.Point(116.404, 39.915); // 使用 Pont 方法创建点坐标,通常该点应该获取当前所在的位置,这里设置的为天安门的位置 map.centerAndZoom(point, 15); // 使用 centerAndZoom 把point设置为地图的中心并且设置地图的放缩等级为15
2.4 坐标系转换类 Convertor
百度对外接口的坐标系并不是GPS采集的真实经纬度,在使用百度地图JavaScript API服务前,需先将非百度坐标通过坐标转换接口转换成百度坐标。
通过Convertor
类将GPS坐标转换为 百度地图坐标
该类包含一个 translate
方法 用来实现坐标转换
2.4.1 Convertor.translate
translate 方法 需要四个参数, points, from, to, callback
- points [Array] 表示需要转换的坐标点的集合,
- from [number] 表示需要转换的坐标点所属的坐标系,1 表示
WGS84
坐标系,即通过GPS获取到的坐标 - to [number] 表示需要转换之后所属的坐标系, 5 表示百度地图坐标系
- callback 表示转换完成之后的回调函数,包含了两个参数 status 和 points
-
- status [number]状态码,0 表示转换成功
- points [Array] 转换之后的坐标点的集合
var x = 113.537764;
var y = 34.803291;
var ggPoint = new BMapGL.Point(x,y);// 以河南省电子商务产业园的坐标点为例
//地图初始化
var bm = new BMapGL.Map("allmap");
bm.centerAndZoom(ggPoint, 15);
bm.addControl(new BMapGL.NavigationControl());
//添加gps marker和label 覆盖物和文本提示后边会讲到
var markergg = new BMapGL.Marker(ggPoint);
bm.addOverlay(markergg); //添加GPS marker
var labelgg = new BMapGL.Label("未转换的GPS坐标(错误)",{offset:new BMapGL.Size(20,-10)});
markergg.setLabel(labelgg); //添加GPS label
//坐标转换完之后的回调函数
translateCallback = function (data){
if(data.status === 0) {
var marker = new BMapGL.Marker(data.points[0]);
bm.addOverlay(marker);
var label = new BMapGL.Label("转换后的百度坐标(正确)",{offset:new BMapGL.Size(20,-10)});
marker.setLabel(label); //添加百度label
bm.setCenter(data.points[0]);
}
}
setTimeout(function(){
var convertor = new BMapGL.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback)
}, 1000);
</script>
效果图如下:
2.5 地图控件
百度地图提供了控件来实现地图中一些常用的功能
2.5.1 控件类别
控件名 | 控件作用 |
ScaleControl | 放缩控件 |
ZoomControl | 比例尺控件 |
NavigationControl3D | 3D控件 |
LocationControl | 定位控件 |
CityListControl | 城市控件 |
2.5.2 创建及添加控件
通过 addControl
把控件添加到地图中
// ...
var ScaleControl = new BMapGL.ScaleControl();// 创建 放缩控件
var ZoomControl = new BMapGL.ZoomControl();// 创建 比例尺控件
var NavigationControl3D = new BMapGL.NavigationControl3D();// 创建 3D控件
var LocationControl = new BMapGL.LocationControl();// 创建 定位控件
var ScaleControl = new BMapGL.CityListControl();// 创建 城市控件
bm.addControl(ScaleControl);// 把放缩控件添加到地图里
bm.addControl(ZoomControl);// 把比例尺控件添加到地图里
bm.addControl(NavigationControl3D);// 把3D控件添加到地图里
bm.addControl(LocationControl);// 把定位控件添加到地图里
bm.addControl(CityListControl);// 把城市控件添加到地图里
// ...
2.6 地图覆盖物
如果想要在地图上划出一片区域可以向其添加覆盖物
2.6.1 覆盖物分类
下表列举一些基础覆盖物
覆盖物名 | 覆盖物用处 |
Label | 文本标注 |
Marker | 图像标注 |
Polyline | 折线叠加层 |
Polygon | 多边形覆盖物 |
Circle | 圆形覆盖物 |
2.6.2 创建及添加覆盖物
通过 地图实例对象
的 addOverlay
方法添加覆盖物
// 以Label为例
var opts = {
position: new BMapGL.Point(116.2787, 40.0492), // 指定文本标注所在的地理位置
offset: new BMapGL.Size(30, -30) // 设置文本偏移量
};
// 创建文本标注对象
var label = new BMapGL.Label('欢迎使用百度地图JSAPI GL版本', opts);
// 自定义文本标注样式
label.setStyle({
color: 'blue',
borderRadius: '5px',
borderColor: '#ccc',
padding: '10px',
fontSize: '16px',
height: '30px',
lineHeight: '30px',
fontFamily: '微软雅黑'
});
bm.addOverlay(label);
2.6.3 删除覆盖物
通过 地图实例对象
的 clearOverlays
方法删除覆盖物
bm.clearOverlays();
2.7 定位
百度地图开发平台提供了 浏览器定位
等方式
2.7.1 浏览器定位 Geolocation类
服务类中的
Geolocation类
会返回用户当前的位置,如果用户拒绝授权定位,则无法返回任何定位结果。
2.7.2 Geolocation.getCurrentPosition
Geolocation类
的 getCurrentPosition
方法用于获取当前的位置,它有两个参数 callback
和 options
- callback 是定位完成之后
(包括成功、失败、超时等情况)
的回调函数,定位结果result
作为参数传入callback,result 包含了三个参数
-
- point 适用于百度地图的坐标点
- accuracy 定位精度,单位 米
- address 根据定位坐标点解析出的地址信息,可能为空(3.0新增)
- options 是定位时设置的参数,可以设置enableHighAccuracy是否采取高精度定位 和 timeout 定位超时时间等参数。
var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMapGL.Marker(r.point);
bm.addOverlay(mk);
bm.panTo(r.point);// 将地图的中心点设置为 point
alert('您的位置:' + r.point.lng + ',' + r.point.lat);
}
else {
alert('failed' + this.getStatus());
}
});
2.8 关键字搜索
百度地图api 提供了LocalSearch类
用于位置检索、周边检索和范围检索。
2.8.1 创建搜索类
LocalSearch类
创建实例化对象需要两个参数location
和 options
- location (Map实例 | Point 点坐标 | String 城市名) 表示检索区域,检索位置由当前地图中心点确定,并支持调整地图视野层级;当参数为坐标时,检索位置由该点所在位置确定;当参数为城市名称时,检索会在该城市内进行,搜索结果的标注将自动加载到地图上
- options 可选参数,设置搜索内容如何显示,及检索完成后的回调函数,详情参考 百度地图LocalSearchOptions类
var local = new BMapGL.LocalSearch(bm, {
renderOptions:{map: bm}
});
2.8.2 周边检索
searchNearby
方法可以根据范围和检索词发起范围检索,接收下列参数:
- keywords 要搜索的关键字
- center (string 城市名 | Point 坐标点)检索的中心位置,写城市名时检索半径将被忽略
- radius (number) 检索半径
在河南省电子商务产业园附近300m范围内 搜索 "超市";
var mPoint = new BMapGL.Point(113.549724,34.80868);
var circle = new BMapGL.Circle(mPoint,300,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
bm.addOverlay(circle);
var local = new BMapGL.LocalSearch(bm, {renderOptions: {map: bm, autoViewport: false}});
local.searchNearby('超市',mPoint,300);
效果如下:
2.8.3 矩形范围内搜索
searchNearby
方法可以根据范围和检索词发起范围检索,接收下列参数:
- keywords 要搜索的关键字
- bounds(Bounds 对象)表示搜索范围的矩形区域 (创建矩形区域参考 百度地图创建矩形区域 ;
在河南省电子商务产业园园区内 搜索 "超市";
var pStart = new BMapGL.Point(113.547613,34.807553);
var pEnd = new BMapGL.Point(113.552769,34.809243);
var bs = new BMapGL.Bounds(pStart, pEnd); //自己规定范围
var local = new BMapGL.LocalSearch(bm, {renderOptions: {map: bm, autoViewport: false}});
local.searchInBounds("超市", bs);
var polygon = new BMapGL.Polygon([
new BMapGL.Point(pStart.lng, pStart.lat),
new BMapGL.Point(pEnd.lng, pStart.lat),
new BMapGL.Point(pEnd.lng, pEnd.lat),
new BMapGL.Point(pStart.lng, pEnd.lat)
], {strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5,fillColor:"blue",fillOpacity:0.1});
bm.addOverlay(polygon);
效果如下: