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.onload=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>

posted on 2017-04-19 17:48  哈哈罗  阅读(257)  评论(0)    收藏  举报

导航