HTML实现地理定位

最新推荐文章于 2024-06-22 11:04:52 发布

weixin_30732487

最新推荐文章于 2024-06-22 11:04:52 发布

阅读量309

点赞数

原文链接：http://www.cnblogs.com/haluo/p/6734700.html

版权

geolocation API 用于将用户当前地理位置共享给站点

　　位于navigator对象中，三个方法：

　　 1.getCurrenPosition()获取当前位置

　　　　　　语法

　　　　　　navigator.geolocation.getCurrentPosition(success_callback,error_callback,{geolocation选项})

　　　　　　参数

　　　　　　success_callback:用户允许共享geolocation回调函数

　　　　　　　　coords:包含当前用户地理位置参数

　　　　　　　　　　latitude:纬度

　　　　　　　　　　longitude：经度

　　　　　　　　　　altitude:海拔

　　　　　　　　　　speed:速度 m/s

　　　　　　error_callback:获取地理位置失败的回调函数

　　　　　　　　error:包含错误信息及代码等

　　　　　　　　messages：错误信息提示

　　　　　　　　　　　　code：错误代码，适用于精确匹配

　　　　　　　　　　　　　　　　PERMISSION_DENIED:用户不提供定位

　　　　　　　　　　　　　　　　POSITION_UNAVILABLE:无法获取当前位置

　　　　　　　　　　　　　　　　TIMEOUT:操作超时

　　　　　　geolocation选项：包含定义超时时间等配置信息

　　　　2.watchPosition() 监视当前位置

　　　　相关属性

　　　　enableHighAccuracy:指示浏览器获取高精度位置，默认false

　　　　timeout:指定获取地理位置的超时时间，单位毫秒

　　　　maximumAge：最长有效期，每个都长时间调用

　　　　3.clearWatch() 清除位置监听

百度地图API

申请密钥AK

　　http://developer.baidu.com/map

引入百度地图相关js

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title></title>
　　<script src="http://api.map.baidu.com/api?v=2.0&ak=APHGc2H3vEDRHPDb3CGAulRXb6LYv10E"></script>
　　<script>
　　　　window.οnlοad=function(){

　　　　　　var geolocation=new BMap.Geolocation();
　　　　　　geolocation.getCurrentPosition(function(position){
　　　　　　　　if(geolocation.getStatus()==BMAP_STATUS_SUCCESS){

　　　　　　　　　　//获取当前地理位置
　　　　　　　　　　var point=position.point;
　　　　　　　　　　console.log(point);
　　　　　　　　　　//创建百度地图
　　　　　　　　　　var map=new BMap.Map("map");

　　　　　　　　　　//制定中心点及缩放比例
　　　　　　　　　　map.centerAndZoom(point,12);//定位显示城市及缩放比例

　　　　　　　　　　//启用滚轮更改显示比例
　　　　　　　　　　map.enableScrollWheelZoom(true);
　　　　　　　　　　//创建标点
　　　　　　　　　　var marker=new BMap.Marker(point);

　　　　　　　　　　//将覆盖物加入地图
　　　　　　　　　　map.addOverlay(marker);

　　　　　　　　　　//将地图中心移动到指定点
　　　　　　　　　　map.panTo(point);
　　　　　　　　}
　　　　　　});
　　　　}
　　</script>
</head>
<body>
　　<div id="map" style="width:500px; height:500px;"></div>
</body>
</html>

转载于:https://www.cnblogs.com/haluo/p/6734700.html

weixin_30732487

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML实现地理定位

geolocation API 用于将用户当前地理位置共享给站点　　位于navigator对象中，三个方法：　　 1.getCurrenPosition()获取当前位置　　　　　　语法　　　　　　navigator.geolocation.getCurrentPosition(success_callback,error_callback,{geolocation选项}...
复制链接

扫一扫