分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

html5定位

发布时间:2023-09-06 01:23责任编辑:顾先生关键词:暂无标签

主要流程:

  • 检测是否支持地理定位
  • 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功,利用它得到的经纬度,结合百度地图api显示

返回属性为:

coords.latitude十进制数的纬度
coords.longitude十进制数的经度
coords.accuracy位置精度
coords.altitude海拔,海平面以上以米计
coords.altitudeAccuracy位置的海拔精度
coords.heading方向,从正北开始以度计
coords.speed速度,以米/每秒计
timestamp响应的日期/时间

粗浅代码如下:

(未转换为百度地图使用的坐标所以精度不是很好)

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css"> ???????body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} ???????#allmap{height:500px;width:100%;} ???????#r-result{width:100%; font-size:14px;}</style><title>基于html5的定位demo</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MRLGAx0pQMKPSxn2Yx1vIc7Xrd6Xfeo2"></script></head><body> ???<div id="allmap"></div></body></html> ???<script type="text/javascript"> ???//因手机号无法验证谷歌账号无法申请秘钥,故采用百度地图API ???????if (navigator.geolocation) ????{ ???????navigator.geolocation.getCurrentPosition(Success,Error,{ ???????// 指示浏览器获取高精度的位置,默认为false ???????enableHighAccuracy: true, ???????// 指定获取地理位置的超时时间,默认不限时,单位为毫秒 ???????timeout: 5000, ???????// 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。 ???????maximumAge: 3000 ???}); ???}else{ ???????alert("Your browser does not support Geolocation!"); ???} ???function Error(error){ ???????//break; ???????console.error(error); ???????var msg=‘‘; ???????switch (error.code) { ???????case error.PERMISSION_DENIED: ???????????msg = "用户拒绝对获取地理位置的请求。" ???????????break; ???????case error.POSITION_UNAVAILABLE: ???????????msg = "位置信息是不可用的。" ???????????break; ???????case error.TIMEOUT: ???????????msg = "请求用户地理位置超时。" ???????????break; ???????case error.UNKNOWN_ERROR: ???????????msg = "未知错误。" ???????????break; ???} ???document.write(msg); ???} ???function Success(position){ ???????var map = new BMap.Map("allmap");//显示地图 ???????map.centerAndZoom(new BMap.Point(116.331398,39.897445),11); ???????map.enableScrollWheelZoom(true); ???????//获取当前位置经纬度 ???????var longitude =position.coords.longitude; ???????var latitude = position.coords.latitude; ???????if(longitude!= "" && latitude!= ""){ ???????????map.clearOverlays(); ????????????var new_point = new BMap.Point(longitude,latitude); ???????????var marker = new BMap.Marker(new_point); ?// 创建标注 ???????????map.addOverlay(marker); ?????????????// 将标注添加到地图中 ???????????map.panTo(new_point); ?????????????} ???}</script>

html5定位

原文地址:http://www.cnblogs.com/babetterdj/p/7787985.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved