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

原创 2015年04月17日 10:36:19
自从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共同学习!

版权声明:本文为博主原创文章,未经博主允许不得转载。

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

百度地图api调用

百度地图api调用 在html5网站中很多企业需要用到的企业地址位置。大多调用第三方的地图api来进行制作。 目前比较主流的第三方地图插件有百度、高德、腾讯、搜狗、谷歌(国内暂不支持)等,他们的引...

前端 - 百度地图 API 基础入门

1.前言最近想完成一个网站,里面需要使用地图相关的内容。经过多方考虑,决定使用百度地图来完成,所以将整个学习历程进行简单的整理,方便朋友们来快速入门。本文系作者 李鹏(MR_LP)原创,转载请私信并在...
  • MR_LP
  • MR_LP
  • 2017年02月20日 14:06
  • 3284

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

HTML5 调用百度地图API地理定位实例                                                   window.onload = functi...
  • goodnew
  • goodnew
  • 2012年03月04日 19:44
  • 24488

HTML5获取地理位置及百度地图展示实例

这两天在看在移动端通过浏览器获取地理位置的相关方法,顺便深入了解一下百度地图API的相关功能。 测试实例包含了以下功能: (1)通过IP地址获取城市地址(并不完全准确,存在代理IP或IP中转时定位与实...
  • CYZERO
  • CYZERO
  • 2015年01月10日 17:12
  • 46893

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

百度地图如何引用到自己网站,并在地图上显示企业的相关信息

步骤一:打开下面这个地址:http://api.map.baidu.com/lbsapi/creatmap/index.html      步骤二:定位中心点      在打开的页面左侧,输入企业的详...
  • a930716
  • a930716
  • 2015年01月21日 18:21
  • 2175

HTML 百度地图API调用示例源码

百度地图API调用示例 .iwTitle { color: #CC5522; font-size: 14px; font-weight: bold; wh...

html引用百度地图API

百度地图的API为: 下面为完整的html代码: map $(function(){ showMap(113,23); //初始坐标 }) //传入坐标,...

HTML5页面调用百度地图API,获取当前位置并导航到目的地

微信也可用, HTML5页面调用百度地图API,获取当前位置并导航到目的地 body, html,#allmap {w...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5调用百度地图API进行地理定位实例
举报原因:
原因补充:

(最多只允许输入30个字)