HTML5调用百度地图API进行地理定位实例
Posted 业余草
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5调用百度地图API进行地理定位实例相关的知识，希望对你有一定的参考价值。
自从html5的标准确定以后，越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多，但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码：<!DOCTYPE html>
<html>
<title>HTML5调用百度地图API进行地理定位实例</title>
<head>
<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=134db1b9cf1f1f2b4427210932b34dcb"></script>
</head>
<body style="margin:50px 10px;">
<div id="status" style="text-align: center"></div>
<div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
</body>
</html>
<script type="text/javascript">
//默认地理位置设置为上海市浦东新区
var x=121.48789949,y=31.24916171;
window.onload = function()
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition);
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
// 百度地图API功能
var map = new BMap.Map("container");
var point = new BMap.Point(x,y);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r)
if(this.getStatus() == BMAP_STATUS_SUCCESS)
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
else
alert('failed'+this.getStatus());
,enableHighAccuracy: true)
return;
alert("你的浏览器不支持获取地理位置！");
;
function showPosition(position)
x=position.coords.latitude;
y=position.coords.longitude;
</script> 看看运行效果：
欢迎大家关注我的博客！如有疑问,请加QQ群：135430763共同学习！
以上是关于HTML5调用百度地图API进行地理定位实例的主要内容，如果未能解决你的问题，请参考以下文章