本文主要是介绍HTML5 调用 ＧＰＳAPI 获取当前位置的坐标 显示在地图上(有包括百度地图与谷歌地图)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例，可返回用户位置的经度和纬度
<script>
var x=document.getElementById("demo");
function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition);}else{x.innerHTML="Geolocation is not supported by this browser.";}}
function showPosition(position){x.innerHTML="Latitude: " + position.coords.latitude +"<br />Longitude: " + position.coords.longitude;}
</script>
position.coords.latitude 为获取的纬度position.coords.longitude 为获取的经度根据获取到的经纬度显示在谷歌地图上：//对于谷歌地图的API 需要你自己注册账号，才能获取对应的地图API调用
<script type="text/javascript">
$.ajax({
type : "get",
async : false,//同步阻塞加载
cache : false,//不缓存
url : "${estatePrefix}/ip.html",
contentType : "application/json; charset=utf-8",
dataType : "json",
success : function(res) {
if (res == "1") {//中国
document
.write("<script src='http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN'><\/script>");
} else {//国外
document
.write("<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'><\/script>");
}
},
error : function() {
document
.write("<script src='http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN'><\/script>");
}
});
</script>
<script>
var lon =position.coords.longitude ;
var lat =position.coords.latitude ;
function initialize() {
var mapOptions = {
scaleControl : true,
center : new google.maps.LatLng(lat, lon),
zoom : 5
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = '${estatePrefix}/resources/images/marker.png'; //显示当前位置的图标
var marker = new google.maps.Marker({
map : map,
position : map.getCenter(),
icon : image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body onload ="getLocation()">
<p id="demo"></p>
地图显示的位置：<div id="map-canvas"></div>
</body>
这篇关于HTML5 调用 ＧＰＳAPI 获取当前位置的坐标 显示在地图上(有包括百度地图与谷歌地图)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
