HTML5调用百度地图API进行地理定位实例-阿里云开发者社区

开发者社区> 业余草> 正文

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

简介: 自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码:<pre code_snippet_id="646150" snippet_file_name="blog_20150417_1_9322150" name=
+关注继续查看
自从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共同学习!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【百度地图API】——如何用label制作简易的房产标签
原文:【百度地图API】——如何用label制作简易的房产标签 摘要:   最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义。有没有快速简易创建房产标签的方法呢?   答案当然是有的啦~   我们可以利用label嘛! ------------------------------------------------------------------------------- 一、创建地图 这是老生常谈的三句话,初始化地图的js。
2138 0
【百度地图API】如何制作公交线路的搜索?如331路
原文:【百度地图API】如何制作公交线路的搜索?如331路 摘要:   从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~ -------------------------------------------------------...
1518 0
【百度地图API】让用户选择起点和终点的驾车导航
原文:【百度地图API】让用户选择起点和终点的驾车导航 摘要:   如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果。但同一个城市可能有多个机场和火车站,那么,如何用可视化的方法让用户自己选择起点和终点呢?答案是,使用数据接口。
1232 0
HTML5 FormData实现文件上传实例
原文:HTML5 FormData实现文件上传实例 表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后,老板再也不用担心我的上传了。
1189 0
【百度地图API】——国内首款团购网站的地图插件
原文:【百度地图API】——国内首款团购网站的地图插件 摘要:   本文介绍了一款应用在团购网站上的地图插件,适用于目前非常流行的团购网站。使用这款地图插件,无需任何编程技术,你就把商家的位置轻松地标注在地图上。
890 0
如何利用【百度地图API】进行定位?非GPS定位
原文:如何利用【百度地图API】进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你。你能很容易使用以下代码进行定位! ------------------------------------------------------------------------------- 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。
922 0
【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据
原文:【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画。可是,百度地图的道路数据并没有公开。
1534 0
+关注
业余草
业余草www.xttblog.com网站站长,CODE大全网站站长,爱分享www.ifxvn.com或www.ndislwf.com网站站长!
154
文章
8
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载