html5-api——地理定位接口
浏览器会自动选择上面的定位方式
<div id="demo"></div>
<script>
var x = document.getElementById('demo');
function getLocation() {
/*能力测试*/
if (navigator.geolocation) {
/*
参数含义：
1.获取地理信息成功之后的回调
2.获取地理信息失败之后的回调
3.调整获取当前地理信息的方式:
enableHighAccuracy:true/false: 是否使用高精度
timeout: 设置超时时间，单位 ms
maximumAge: 可以设置浏览器重新获取地理信息的时间间隔，单位 ms
navigator.geolocation.getCurrentPosition(success, error, option);
*/
navigator.geolocation.getCurrentPosition(showPosition, showError, {
/*
enableHighAccuracy:true,
timeout:3000,
maximumAge:3000
*/
});
} else {
x.innerHTML = 'Geolocation is not supported by this browser';
}
}
/*获取地理位置成功之后的回调*/
/*如果获取地理信息成功，会将获取到的地理信息传递给成功之后的回调
* position.coords.latitude 纬度
* position.coords.longitude 经度
* position.coords.accuracy 精度
* position.coords.altitude 海拔高度*/
function showPosition(position) {
x.innerHTML = 'Latitude:' + position.coords.latitude + '</br>Longitude' + position.coords.longitude;
}
/*获取地理位置失败之后的回调*/
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = 'User denied the request for Geolocation.';
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = 'Location information is unavailable.';
break;
case error.TIMEOUT:
x.innerHTML = 'The request to get user location timed out.';
break;
case error.UNKNOWN_ERROR:
x.innerHTML = 'An unknown error occurred.';
break;
}
}
</script>
但是在实际应用中，都是结合一些第三方地图 api 接口操作的地图业务，个人是无法实现的，下面以百度地图为例展示第三方接口使用。
以浏览器网页地图为例
随意选取地图样式
代码复制后需要将你申请的百度地图**填入才可使用
所复制的地图源码：
<!DOCTYPE html>
<html>
<head>
<title>普通地图&全景图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的**"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#panorama {height: 50%;overflow: hidden;}
#normal_map {height:50%;overflow: hidden;}
</style>
</head>
<body>
<div id="panorama"></div>
<div id="normal_map"></div>
<script type="text/javascript">
//全景图展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(120.320032, 31.589666)); //根据经纬度坐标展示全景图
panorama.setPov({heading: -40, pitch: 6});
panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
//普通地图展示
var mapOption = {
mapType: BMAP_NORMAL_MAP,
maxZoom: 18,
drawMargin:0,
enableFulltimeSpotClick: true,
enableHighResolution:true
}
var map = new BMap.Map("normal_map", mapOption);
var testpoint = new BMap.Point(120.320032, 31.589666); //根据经纬度坐标展示普通地图
map.centerAndZoom(testpoint, 18);
var marker=new BMap.Marker(testpoint);
marker.enableDragging();
map.addOverlay(marker);
marker.addEventListener('dragend',function(e){
panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
panorama.setPov({heading: -40, pitch: 6});}
);
</script>
</body>
</html>
想获取其他地区的经纬度可用坐标拾取器，再放入上面地图源码中即可显示相应地区的地图