H5地理位置定位

最新推荐文章于 2024-04-24 16:21:32 发布

weixin_34107739

最新推荐文章于 2024-04-24 16:21:32 发布

阅读量218

点赞数

文章标签： javascript ViewUI

一：介绍使用的知识点

1.地理定位的原理

2.geolocation对象

3.Geolocation Api

4.getCurrentPosition的第一个参数

5.getCurrentPosition的第二个参数

6.getCurrentPosition的第三个参数

7.watchPosition与clearPosition函数

二：程序演示

1.注意点

　　需要将新写的程序放在本地的网站下

2.启动程序

3.程序--检验浏览器是否支持定位

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8/>
 4     <title>geolocation</title>
 5     <script src="D:\jquery\jquery-1.12.4.min.js"></script>
 6 </head>
 7 <body>
 8     <p id="geo_loc"></p>
 9     <script>
10         if(navigator.geolocation){
11             alert("support");
12         }else{
13             alert("do not support");
14         }
15     </script>
16 </body>
17 </html>

4.运行程序

5.程序--定位　

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8/>
 4     <title>geolocation</title>
 5     <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
 6 </head>
 7 <body>
 8     <p id="geo_loc"></p>
 9     <div style="width:697px;height:550px;border:#ccc solid 2px;" id="dituContent"></div>
10     <script>
11         if(navigator.geolocation){
12             <!--alert("support");-->
13             navigator.geolocation.getCurrentPosition(
14                 function(p){
15                     var latitude=p.coords.latitude;
16                     var longitude=p.coords.longitude;
17                     <!--alert(latitude+"---"+longitude);   //弹出经度维度-->
18                     createMap(latitude,longitude);
19                 },
20                 function(e){
21                     var err=e.code+"\n"+e.message;
22                     alert(err);
23                 }
24             );
25         }else{
26             alert("do not support");
27         }
28         <!--百度地图的展示-->
29         function createMap(a,b){
30             var map=new BMap.Map("dituContent");
31             var point=new BMap.Point(b,a);
32             map.centerAndZoom(point,10);
33             window.map=map;
34         }
35     </script>
36 </body>
37 </html>

6.运行结果

weixin_34107739

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5地理位置定位

一：介绍使用的知识点1.地理定位的原理　　 2.geolocation对象　　 3.Geolocation Api　　 4.getCurrentPosition的第一个参数　　 5.getCurrentPosition的第二个参数　　 6.getCurrentPosition的第三个参数　　 7.watchPosition与clearPosition函数　　...
复制链接

扫一扫