HTML5调用百度地图API进行地理定位实例

最新推荐文章于 2024-05-20 22:30:44 发布

业余草

最新推荐文章于 2024-05-20 22:30:44 发布

阅读量2.9w

点赞数 9

分类专栏： html5 文章标签： html5 Geolocation navigator getCurrentPosition 百度地图api

本文链接：https://blog.csdn.net/xmtblog/article/details/45093661

版权

html5 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

自从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共同学习！

业余草

关注

9
点赞
踩
55

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML5调用百度地图API进行地理定位实例

自从HTML5的标准确定以后，越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多，但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码： HTML5调用百度地图API进行地理定位实例
复制链接

扫一扫