<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>获取定位信息</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#map_title{ clear:both; width:100%;}
#map{ clear:both; width:100%; min-height:400px; margin:10px auto; border:1px #ddd solid; }
#mapInfo{ clear:both; width:100%; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里是您的百度API的AK码(没有可上http://lbsyun.baidu.com/apiconsole/record申请)"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script>
$(function(){
navigator.geolocation.getCurrentPosition(translatePoint); //定位
});
function translatePoint(position){
var currentLat = position.coords.latitude;
var currentLon = position.coords.longitude;
var gpsPoint = new BMap.Point(currentLon, currentLat); //坐标
BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标
}
function initMap(point){
//初始化地图
map = new BMap.Map("map");
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point))
}
//显示定位详细信息
var geoc = new BMap.Geocoder();
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
if(this.getStatus() == BMAP_STATUS_SUCCESS) {
document.getElementById("mapInfo").innerHTML = '您的具体位置信息:<br />经度:' + r.point.lng + '<br />纬度:' + r.point.lat;//经度,纬度
geoc.getLocation(r.point, function(rs) {
var addComp = rs.addressComponents;
document.getElementById("mapInfo").innerHTML += '<br />地址:' + addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//详细地址
});
} else {
document.getElementById("mapInfo").innerHTML = 'failed' + this.getStatus();
}
}, { enableHighAccuracy: true });
</script>
</head>
<body>
<div id="map_title">获取定位信息</div>
<div id="map"></div>
<div id="mapInfo"></div>
<script>getPosition();</script>
</body>
</html>
<html lang="zh-cn">
<head>
<title>获取定位信息</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#map_title{ clear:both; width:100%;}
#map{ clear:both; width:100%; min-height:400px; margin:10px auto; border:1px #ddd solid; }
#mapInfo{ clear:both; width:100%; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里是您的百度API的AK码(没有可上http://lbsyun.baidu.com/apiconsole/record申请)"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script>
$(function(){
navigator.geolocation.getCurrentPosition(translatePoint); //定位
});
function translatePoint(position){
var currentLat = position.coords.latitude;
var currentLon = position.coords.longitude;
var gpsPoint = new BMap.Point(currentLon, currentLat); //坐标
BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标
}
function initMap(point){
//初始化地图
map = new BMap.Map("map");
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point))
}
//显示定位详细信息
var geoc = new BMap.Geocoder();
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
if(this.getStatus() == BMAP_STATUS_SUCCESS) {
document.getElementById("mapInfo").innerHTML = '您的具体位置信息:<br />经度:' + r.point.lng + '<br />纬度:' + r.point.lat;//经度,纬度
geoc.getLocation(r.point, function(rs) {
var addComp = rs.addressComponents;
document.getElementById("mapInfo").innerHTML += '<br />地址:' + addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//详细地址
});
} else {
document.getElementById("mapInfo").innerHTML = 'failed' + this.getStatus();
}
}, { enableHighAccuracy: true });
</script>
</head>
<body>
<div id="map_title">获取定位信息</div>
<div id="map"></div>
<div id="mapInfo"></div>
<script>getPosition();</script>
</body>
</html>