您的位置：首页 > Web前端 > HTML5

HTML5 调用ＧＰＳAPI 获取当前位置的坐标显示在地图上(有包括百度地图与谷歌地图)

2014-11-26 15:02 1211 查看

HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度

<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.[code]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>[/code]

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 获取当前位置的坐标 显示在地图上(有包括百度地图与谷歌地图)

HTML5 - 使用地理定位

HTML5 调用ＧＰＳAPI 获取当前位置的坐标显示在地图上(有包括百度地图与谷歌地图)