一、H5的地理定位
navigator.geolocation
HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制，必须先得到用户明确许可，才能获取用户的位置信息。
1. 用法：
//兼容写法
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success,error);
} else {
alert("对不起，您的浏览器不支持地理定位！");
}其中：
- successCallback()—————–获取用户位置成功的回调函数
- errorCallback()———————获取用户位置失败的回调函数
- coords——————————–获取当前用户的经纬度
- position.coords.longitude——–经度
- position.coords.latitude———-纬度
1 . successCallback() 获取地理位置成功的回调函数
function successCallback (position) {
var longitudeValue = position.coords.longitude;//获得当前位置的经度
var latitudeValue = position.coords.latitude;//获得当前位置的纬度
console.log("经度："+longitudeValue+"---纬度："+latitudeValue);
}2 . errorCallback() 获取地理位置失败的回调函数
function errorCallback (error) {
console.log(error);
console.log("获取用户位置失败！")
}最后：
可以获得用户位置的经纬度。还可以通过http://www.gpsspg.com/maps.htm网址，利用经纬度来查询到地图。
二、百度地图API的应用
- 第一步，进入百度地图开发平台。http://lbsyun.baidu.com/
- 第二步，找到对应的“ 开发文档 ”下的JavaScript API，并且登录
- 第三步，登录后，点击立即使用，并创建应用，来获取密钥
- 第四步，创建好应用后，将密钥（AK）复制下来，留以备用。
- 再选择需要使用的展示图，进入DEMO演示
- 第五步，将左栏代码拷贝，放入html文件中
- 最后，将密钥复制到对应地方即可。
- 还可以通过获取当前用户位置的经纬度，来得到对应的地图。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>普通地图&全景图</title>
<!--填写有效的密钥-->
<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 longitudeValue = 115.832422;//经度
var latitudeValue = 28.760448 ;//纬度
//全景图展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(longitudeValue, latitudeValue)); //根据经纬度坐标展示全景图
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(longitudeValue, latitudeValue);
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>结果如下：
总结：
利用百度地图的api，结合H5的navigator.geolocation获取用户地理位置，通过密钥可以获得当前地理位置的地图展示。