html5的获取地理位置信息接口GeolocationAPI正常情况下在浏览器无法显示,因为涉及用户隐私问题官方已经限制,那有什么办法可以查看GeolocationAPI程序运行效果?
你如果写了,你刷新页面一下,页面会请求你是否同意获取地理信息
2.必须先引用(见上面),实现代码(里面需要填写上面引用得密钥)
<!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 {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 70%;
height: 100%;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="container"></div>
<!--加载百度 map api-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script>
//检测浏览器是否支持定位API
if (navigator.geolocation) {
// getCurrentPosition方法来获取当前位置的坐标值
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude; // 纬度
var longitude = position.coords.longitude; // 经度
console.log("经度:" + longitude + "纬度:" + latitude);
// container表示注入哪个容器
var map = new BMap.Map("container");
// 把经度纬度传给百度
var point = new BMap.Point(longitude, latitude);
///初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
//坐标转换
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(point);
convertor.translate(pointArr, 1, 5, translateCallback);
//坐标转换完之后的回调函数
function translateCallback(data) {
if (data.status === 0) {
// 创建标注
var marker = new BMap.Marker(data.points[0]
map.addOverlay(marker);
map.setCenter(data.points[0]);
}
}
}, function(error) {
console.log(error.code)
})
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>geolocation 属性</h2>
<p id="demo">
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("demo").innerHTML =
"该浏览器不支持 Geolocation。";
}
function showPosition(position) {
document.getElementById("demo").innerHTML =
"纬度: " + position.coords.latitude + "<br>" +
"经度: " + position.coords.longitude;
}
</script>
</body>
</html>