地理定位 geolocation/百度地图API
2017-06-08 本文已影响0人
飞鱼_JS
- Geolocation API 用于获得用户的地理位置。
- 使用 getCurrentPosition() 方法来获得用户的位置
navigator.gentlocation
- getCurrentPosition(successCallback, errorCallback, options) 获取当前的地理位置
- watchPosition(successCallback, errorCallback, options) 监听地理位置变化
- clearWatch() 停止位置监听
position对象
获取位置成功会调用 successCallback回调函数， 自动接收position对象
-
coords
- longitude 经度
- latitude 纬度
- altitude 海拔
- handing 前进方向
- speed 速度
- altitudeAccuracy 海拔精度
- accuracy 坐标精度
-
timestamp 时间戳
error对象
获取位置失败，调用errorCallback回调，调用 error对象
- code 错误代码
- message 错误信息
选项 options
- timeout 超时时间
- enableHighAccuracy 是否最优
- maxmunAge 最大缓存时间
注意
- chrome浏览器只有在https方式下打开的网页才能获取地理位置
- 手上上的大部分浏览器，微信 也要求https 才能获取位置
示例
<body>
<h1>获取地理定位</h1>
<hr>
<div id="box"></div>
<script>
navigator.geolocation.getCurrentPosition(
function(position){
console.log(position);
var str = "";
str += "当前的纬度："+position.coords.longitude+"<br>";
str += "当前的经度："+position.coords.latitude+"<br>";
str += "当前的海拔："+position.coords.altitude+"<br>";
str += "坐标经度："+position.coords.accuracy+"<br>";
str += "前进方向："+position.coords.heading+"<br>";
str += "速度："+position.coords.speed+"<br>";
document.getElementById("box").innerHTML = str;
},
function(error){
alert("获取失败! "+error.code+" , "+error.message);
},
{
timeout:1000, //超时时间
enableHighAccuracy:true, //是否优秀
maximumAge:1000000 //最大缓存时间
}
);
</script>
使用百度地图API 在HTML页面生成百度地图
<head>
<meta charset="UTF-8">
<title>地图</title>
<style>
#mymap{
width:600px;
height:600px;
border:1px solid #ccc;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=B8cfd1501ae7f7c55dc3793ee989c354"></script>
</head>
<body>
<h1>地图演示</h1>
<hr>
<div id="mymap"></div>
<script>
//获取地理定位
navigator.geolocation.getCurrentPosition(
function(position){
createMap(position.coords.longitude, position.coords.latitude, 15);
},
function(){
alert("获取地理位置失败");
createMap(116.404, 39.915, 11)
},
{
timeout:3000
}
);
// * 生成地图
// * @param number longitude 维度
// * @param number latitude 经度
// * @param number zoom
function createMap(longitude, latitude, zoom){
var zoom = zoom || 11; //设置默认值
// 百度地图API功能
var map = new BMap.Map("mymap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(longitude, latitude), zoom); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
//map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}
</script>
</body>
</html>
