网站系统建设招标文件,演示动画制作免费网站,惠阳市网站建设,wordpress new2主题使用在学习navigator.geolocation的时候#xff0c;有一个实例是获取坐标后显示在谷歌地图上。众所周知#xff0c;谷歌地图国内并不能直接访问#xff0c;得用特殊手段#xff0c;那我要测试的时候还要开着梯子挺麻烦的#xff0c;想给别人用也得那个人能访问谷歌地图先。 地… 在学习navigator.geolocation的时候有一个实例是获取坐标后显示在谷歌地图上。众所周知谷歌地图国内并不能直接访问得用特殊手段那我要测试的时候还要开着梯子挺麻烦的想给别人用也得那个人能访问谷歌地图先。 地图不止谷歌一家有嘛咱国内还是可以用用百度地图、必应地图、高德地图这些。这篇文章记录如何在百度地图上显示使用navigator.geolocation返回的定位坐标。 首先我们要在百度地图开放平台上注册开发者这样才能申请百度地图的秘钥有了秘钥才能够使用百度地图的服务这里就不吧过程写出来了。 我们需要在网页中使用百度地图那我们就创建一个浏览器端的百度地图应用选择自己想要的服务因为我第一次接触这个不知道哪些服务对应啥功能就先全勾上了白名单因为我是在本地测试的网页不在服务器上运行自然也没有域名所以Referer白名单就设置成了*。 创建好后我们就可以在应用列表中看到我们刚刚创建的应用了 这里的AK号非常重要我们是要用这个AK号来链接百度地图的。 百度地图官方有提供实例和开发文档来帮助我们熟悉它家的产品本篇文章涉及到内容的官方文档会放在下面的参考链接中。 因为我使用Chrome在本地运行包含使用navigator.geolocation定位的文件它压根定位不了Firefox却能正常定位那就在Firefox上运行本次的实例吧。 我们来写个简单的页面。这个页面有两个div区域一左一右左边的用来显示一些获取到的坐标信息以及放操作按钮右边就是显示百度地图啦。 1 head2 meta charsetUTF-8 /3 title定位显示在百度地图上/title4 style5 body {6 margin:0px;7 padding:0px;8 }9 /* 显示详细信息的区域 */
10 #detail {
11 width:30%;
12 height:750px;
13 background-color:#DDDDDD;
14 position:absolute;
15 left:0px;
16 top:0px;
17 padding-left:10px;
18 }
19 /* 百度地图区域的样式 */
20 #baiduMap {
21 width:70%;
22 height:750px;
23 position:absolute;
24 right:0px;
25 top:0px;
26 }
27 /style
28 /head
29
30 body
31 div iddetail
32 p idpositionState定位状态停止/p
33 p idpositionInformation定位信息br /经度br /纬度/p
34 button onclickgetPos()获取定位/button
35 /div
36 div idbaiduMap/div
37 /body 网页结构 在head中引入百度地图API文件标橙的部分就是我们上面创建应用的AK号了 1 head
2 script typetext/javascript srchttp://api.map.baidu.com/api?v3.0akrj3D8rKFVj3QqNVKNYBFipdA3XMtfN4v/script
3 /head 在body中的script中创建百度地图的实例BMap.Map传递的参数就是我们用来显示百度地图的区域本例中使用一个idbaiduMap的div区域作为显示区域所以传递的参数就是这个div区域的id 1 //创建Map实例
2 var map new BMap.Map(baiduMap); 之后我们初始化地图的位置初始化地图的位置需要设置经纬度来设置地图中心定位的坐标BMap.Point这里设置成经度116.404纬度39.915天安门的坐标设置地图缩放级别值越大地图比例就越小。据官方API文档上的介绍当地图的类型的BMAP_NORMAL_MAP时可以使用setMapType()方法设置时需要在调用centerAndZoom之前要用setCurrentCity()来设置你设置坐标的城市这里我们就设置成北京 1 //设置地图显示的城市
2 map.setCurrentCity(北京);
3 //设置地图中心点的坐标
4 var centerPoint new BMap.Point(116.404,39.915);
5 //初始化地图设置缩放级别为15
6 map.centerAndZoom(centerPoint,15); 这个时候我们就能够看到地图了 但是这个地图此时并不能放大缩小放大缩小功能呢是需要我们设置开启的默认是不启动的。 我们通过Bmap.enableScrollWheelZoom()函数可以开启和关闭地图的放大缩小功能传递true开启放大缩小功能传递false关闭放大缩小功能 1 //开启鼠标滚轮缩放
2 map.enableScrollWheelZoom(true); 这个时候就可以放大缩小了 在地图API示例中有在右上角添加了一个控件切换地图显示模式可以选择地图模式和混合模式实景地图坐标。 创建BMap.MapTypeControl对象设置能切换的类型有哪些BMAP_NORMAL_MAPH地图模式 和 BMAP_HYBRID_MAP混合模式然后使用addControl来添加这个控件 1 //创建切换地图显示类型的控件
2 var mapTypeCon new BMap.MapTypeControl({
3 mapTypes:[
4 BMAP_NORMAL_MAP,
5 BMAP_HYBRID_MAP
6 ]
7 });
8 //添加切换地图显示类型的控件
9 map.addControl(mapTypeCon); 效果如下 这个时候百度地图导入的部分就暂时告一段落落了接下来就是结合navigator.geolocation将获取到的定位信息显示在地图上了。 我希望当我点击旁边的“获取定位”按钮百度地图就会定位获取到的定位位置并且显示一个标记。 我们先获取展示信息的两个元素 1 //获取显示定位状态的元素
2 var posState document.getElementById(positionState);
3 //获取显示定位信息的元素
4 var posInformation document.getElementById(positionInformation); 然后写三个函数一个是点击按钮获取一次定位的事件一个是定位成功时回调的函数一个是定位失败时回调的函数。 获取一次定位的事件我们绑定在上面的上面的button的onclick事件上因为偷懒所以我在网页结构的时候就给button绑上啦你个懒鬼 1 //点击按钮获取定位2 function getPos() {3 //判断用户是否支持定位4 if(navigator.geolocation) {5 //支持则获取定位获取成功回调showPosition失败回调showError6 navigator.geolocation.getCurrentPosition(showPosition,showError);7 }8 else {9 //不支持则修改提示信息告知用户
10 posInformation.innerHTML 您的浏览器不支持定位;
11 }
12 } 定位失败时执行的回调函数showError中我们获取错误代码然后用个switch来获取并修改提示信息代码对应的错误信息可以看MDN中PositionError的条目或者发生错误时调用PositionError.message查看 1 //获取定位信息失败时执行的函数2 function showError(error) {3 //在控制台直接打印错误代码和错误信息4 console.log(错误代码error.code \n错误信息 error.message);5 6 //使用switch对error的错误代码进行判断然后修改提示信息7 switch(error.code){8 //用户拒绝请求9 case error.PERMISSION_DENIED:
10 posInformation.innerHTML 用户拒绝获取地理位置的请求;
11 break;
12 //位置信息不可用
13 case error.POSITION_UNAVAILABLE:
14 posInformation.innerHTML 位置信息不可用;
15 break;
16 //请求超时
17 case error.TIMEOUT:
18 posInformation.innerHTML 请求用户地理位置超时;
19 break;
20 //未知错误
21 case error.UNKNOWN_ERROR:
22 posInformation.innerHTML 未知错误;
23 break;
24 }
25 } 定位成功时回调的函数showPosition中我们吧经纬度信息写在左侧并且在百度地图上定位我们输入的坐标并在上面添加一个遮蔽物在百度地图上出现的定位点啊、路线图啊被称作遮蔽物标明它定位到的位置。 1 //成功获取定位2 function showPosition(Position) {3 //修改左侧坐标信息4 posInformation.innerHTML 定位信息br /经度 Position.coords.longitude 5 br /纬度 Position.coords.latitude;6 //创建一个变量储存坐标7 var myPos new BMap.Point(Position.coords.longitude,Position.coords.latitude);8 //在百度地图上定位9 map.centerAndZoom(myPos,15);
10 //创建遮蔽物
11 var marker new BMap.Marker(myPos);
12 //将遮蔽物绘制到地图上
13 map.addOverlay(marker);
14 } 这个时候我们就可以点击按钮获取定位。。。 啦不对啊这定位不是我获取定位的地方啊怎么偏了呢 其实在百度地图开放平台的开发文档中有这样一个条目它是这么说的 原来如此龙一不是GPS采集真实的经纬度啊 官方在地图API示例中有将GPS坐标转换成百度坐标的的实例里面有详细的实例。先将坐标储存到数组中然后创建一个BMap.Convertor对象使用Convertor对象中的translate()方法进行转换。translate方法需要回调一个函数我们再在这个函数中将获取到的坐标定位在百度地图中这个时候的showPosition()函数应该是这样的 1 //成功获取定位2 function showPosition(Position) {3 //创建一个变量储存坐标4 var myPos new BMap.Point(Position.coords.longitude,Position.coords.latitude);5 //创建一个数组用于储存坐标6 var pointArr [];7 //将坐标放入数组中8 pointArr.push(myPos);9
10 //创建convertor对象用于将坐标转换成百度地图的坐标
11 var convertor new BMap.Convertor();
12 //进行坐标转换,转换完成后回调函数translateCallback可以传递第四个参数来延迟执行
13 convertor.translate(pointArr,1,5,translateCallback);
14 } convertor.translate的语法在官方的JavaScript v3.0类参考中看到善用页面内搜索功能F3或者CtrlF然后它就会告诉你参数2和参数3的具体含义在Web服务API中心情复杂.jpg 在坐标转化的回调函数中我们获取转换后的坐标然后在地图上定位以及创建遮蔽物修改网页中的提示信息 1 //坐标转换后回调的函数2 function translateCallback(data) {3 //data.status记录本次访问api状态返回0为成功失败则为返回其它数字4 if(data.status 0) {5 //在百度地图上定位获取到的坐标6 map.centerAndZoom(data.points[0],20);7 //创建覆盖物8 var marker new BMap.Marker(data.points[0]);9 //在地图上绘制覆盖物
10 map.addOverlay(marker);
11 //修改左侧坐标信息
12 posInformation.innerHTML 定位信息br /经度 data.points[0].lng
13 br /纬度 data.points[0].lat;
14 }
15 } 这个时候定位就比较精准啦 基本上我们想要实现的效果就搞完啦功能并不是很完善比如我点两次获取定位它会标记两个点不会删掉上一个点这个部分就不放出来了懒。 可能删删改改有些朋友做到后面会有点懵逼我就放出完整的内容在这里啦 1 !DOCTYPE html2 html3 4 head5 meta charsetUTF-8 /6 title定位显示在百度地图上/title7 script typetext/javascript srchttp://api.map.baidu.com/api?v3.0akrj3D8rKFVj3QqNVKNYBFipdA3XMtfN4v/script8 style9 body {10 margin:0px;11 padding:0px;12 }13 /* 显示详细信息的区域 */14 #detail {15 width:30%;16 height:750px;17 background-color:#DDDDDD;18 position:absolute;19 left:0px;20 top:0px;21 padding-left:10px;22 }23 /* 百度地图区域的样式 */24 #baiduMap {25 width:70%;26 height:750px;27 position:absolute;28 right:0px;29 top:0px;30 }31 /style32 /head33 34 body35 div iddetail36 p idpositionState定位状态停止/p37 p idpositionInformation定位信息br /经度br /纬度/p38 button onclickgetPos()获取定位/button39 /div40 div idbaiduMap/div41 script typetext/javascript42 //创建Map实例43 var map new BMap.Map(baiduMap);44 //设置地图显示的城市45 map.setCurrentCity(北京);46 //设置地图中心点的坐标47 var centerPoint new BMap.Point(116.404,39.915);48 //初始化地图设置缩放级别为1549 map.centerAndZoom(centerPoint,15);50 //开启鼠标滚轮缩放51 map.enableScrollWheelZoom(true);52 //创建切换地图显示类型的控件53 var mapTypeCon new BMap.MapTypeControl({54 mapTypes:[55 BMAP_NORMAL_MAP,56 BMAP_HYBRID_MAP57 ] 58 });59 //添加切换地图显示类型的控件60 map.addControl(mapTypeCon);61 62 //获取显示定位状态的元素63 var posState document.getElementById(positionState);64 //获取显示定位信息的元素65 var posInformation document.getElementById(positionInformation);66 67 68 //点击按钮获取定位69 function getPos() {70 //判断用户是否支持定位71 if(navigator.geolocation) {72 //支持则获取定位获取成功回调showPosition失败回调showError73 navigator.geolocation.getCurrentPosition(showPosition,showError);74 }75 else {76 //不支持则修改提示信息告知用户77 posInformation.innerHTML 您的浏览器不支持定位;78 }79 }80 81 //成功获取定位82 function showPosition(Position) {83 //创建一个变量储存坐标84 var myPos new BMap.Point(Position.coords.longitude,Position.coords.latitude);85 //创建一个数组用于储存坐标86 var pointArr [];87 //将坐标放入数组中88 pointArr.push(myPos);89 90 //创建convertor对象用于将坐标转换成百度地图的坐标91 var convertor new BMap.Convertor();92 //进行坐标转换,转换完成后回调函数translateCallback可以传递第四个参数来延迟执行93 convertor.translate(pointArr,1,5,translateCallback);94 }95 96 //获取定位信息失败时执行的函数97 function showError(error) {98 //在控制台直接打印错误代码和错误信息99 console.log(错误代码error.code \n错误信息 error.message);
100
101 //使用switch对error的错误代码进行判断然后修改提示信息
102 switch(error.code){
103 //用户拒绝请求
104 case error.PERMISSION_DENIED:
105 posInformation.innerHTML 用户拒绝获取地理位置的请求;
106 break;
107 //位置信息不可用
108 case error.POSITION_UNAVAILABLE:
109 posInformation.innerHTML 位置信息不可用;
110 break;
111 //请求超时
112 case error.TIMEOUT:
113 posInformation.innerHTML 请求用户地理位置超时;
114 break;
115 //未知错误
116 case error.UNKNOWN_ERROR:
117 posInformation.innerHTML 未知错误;
118 break;
119 }
120 }
121
122 //坐标转换后回调的函数
123 function translateCallback(data) {
124 //data.status记录本次访问api状态返回0为成功失败则为返回其它数字
125 if(data.status 0) {
126 //在百度地图上定位获取到的坐标
127 map.centerAndZoom(data.points[0],20);
128 //创建覆盖物
129 var marker new BMap.Marker(data.points[0]);
130 //在地图上绘制覆盖物
131 map.addOverlay(marker);
132 //修改左侧坐标信息
133 posInformation.innerHTML 定位信息br /经度 data.points[0].lng
134 br /纬度 data.points[0].lat;
135 }
136 }
137 /script
138 /body
139
140 /html 全部内容 参考资料 MDN - 使用地理位置定位https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation 百度地图开放平台 - JavaScript API v3.0类参考http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html 百度地图开放平台 - 地图API演示 - 地图展示http://lbsyun.baidu.com/jsdemo.htm#a1_2 MDN - PositionErrorhttps://developer.mozilla.org/zh-CN/docs/Web/API/PositionError MDN - PositionError.messagehttps://developer.mozilla.org/zh-TW/docs/Web/API/PositionError/message 百度地图开放平台 - 开发文档 - JavaScript API v2.0 - 坐标转换声明http://lbsyun.baidu.com/index.php?titlejspopular/guide/coorinfo 百度地图开放平台 - 地图API演示 - 原始坐标转成百度坐标http://lbsyun.baidu.com/jsdemo.htm#a5_2 百度地图开放平台 - Web服务API - 坐标转换http://lbsyun.baidu.com/index.php?titlewebapi/guide/changeposition转载于:https://www.cnblogs.com/cwsb/p/10863215.html
