使用地理位置定位
地理位置API通过 navigator.geolcation
提供
废话不说 直接上例子:
// geolcation是获取本地地理定位信息的api
// api 获取当前设备的地理信息对象
navigator.geolocation.getCurrentPosition(function(position) {
// 成功获取的回调函数
// position 地理信息
console.log(position)
},function(err) {
// 失败时候的回调
//Network location provider at 'https://www.googleapis.com/' : No response received
//调用的是境外的谷歌定位服务
//注意:但是在移动设备是可以使用的
console.log(err);
})
基于百度地图的地理定位信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Geolocation</title>
<style type="text/css">
html,body {
height: 100%
}
body {
margin: 0;
padding: 0;
}
#container {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak= 0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>
var geolocation = new BMap.Geolocation
geolocation.getCurrentPosition(function(position){
console.log(position)
// 这些都是写死
var map = new BMap.Map("container") // container表示显示哪个容器
// 把经度纬度传给百度
/*40.1691162668,116.6348530780*/
var point = new BMap.Point(position.point.lng,position.point.lat)
//默认的比例
map.centerAndZoom(point, 20)
//添加鼠标滚动缩放
map.enableScrollWheelZoom()
// 只写上面三行就可出现地图了,并且会定位
// 定义好了一个图片标记
var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));
// 创建标注
var marker = new BMap.Marker(point, {icon: myIcon})
map.addOverlay(marker)
});
</script>
</body>
</html>