HTML5 调用百度地图API地理定位

<!DOCTYPE html>
<html>
<title>HTML5 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=E4805d16520de693a3fe707cdc962045"></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">

    window.onload = function() {
        if(navigator.geolocation) {
            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
            	// 百度地图API功能
				var map = new BMap.Map("container");
				var point = new BMap.Point(116.331398,39.897445);
				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);
						alert('您的位置:'+r.point.lng+','+r.point.lat);
					}
					else {
						alert('failed'+this.getStatus());
					}        
				},{enableHighAccuracy: true})
        }
    };

</script>



评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值