H5新特性地理定位（geolocation）

最新推荐文章于 2024-04-25 15:05:53 发布

Friday--星期五

最新推荐文章于 2024-04-25 15:05:53 发布

阅读量951

点赞数

分类专栏： HTML 笔记文章标签：定位 js javascript html5 html

本文链接：https://blog.csdn.net/qq_45644092/article/details/105319275

版权

HTML 笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一：介绍使用的知识点
1.地理定位的原理

2.geolocation对象

3.Geolocation Api

4.getCurrentPosition的第一个参数

5.getCurrentPosition的第二个参数

6.getCurrentPosition的第三个参数

7.watchPosition与clearPosition函数

二：程序演示
1.注意点需要将新写的程序放在本地的网站下
在这里插入图片描述
2.启动程序
3.程序–检验浏览器是否支持定位

<!DOCTYPE html>
<head>
   <meta charset=utf-8/>
   <title>geolocation</title>
   <script src="D:\jquery\jquery-1.12.4.min.js"></script>
</head>
<body>
   <p id="geo_loc"></p>
   <script>
       if(navigator.geolocation){
           alert("support");
       }else{
           alert("do not support");
       }
   </script>
</body>
</html>

4.运行程序
在这里插入图片描述
5.程序–定位

<!DOCTYPE html>
<head>
 <meta charset=utf-8 />
 <title>geolocation</title>
 <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> 
</head>
<body>
 <p id="geo_loc"></p>
 <div style="width:697px;height:550px;border:#ccc solid 2px;" id="dituContent"></div>
 <script>
   if (navigator.geolocation) {
     // 看看浏览器支持geolocation吗？
     alert("support");
     // 获取当前位置
     navigator.geolocation.getCurrentPosition(
       // 第一个参数是成功获取位置信息的回调，它是方法唯一必须的参数
       function (p) {
         // 国家省份城市坐标纬度
         var latitude = p.coords.latitude;
         // 经度
         var longitude = p.coords.longitude;
         //弹出经度维度
         alert(latitude + "---" + longitude);
         createMap(latitude, longitude);
       },
       // 第二个参数用于捕获获取位置信息出错的情况
       function (e) {
         var err = e.code + "\n" + e.message;
         alert(err);
       }
     );
   } else {
     alert("do not support");
   }
   // <!--百度地图的展示-->
   function createMap(a, b) {
     var map = new BMap.Map("dituContent");
     var point = new BMap.Point(b, a);
     map.centerAndZoom(point, 10);
     window.map = map;
   }
 </script>
</body>
</html>

6.运行结果
在这里插入图片描述

Friday--星期五

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5新特性地理定位（geolocation）

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

扫一扫