HTML5调用百度地图API进行地理定位实例 ,定位当前位置

转载 2015年11月18日 15:36:01
    <!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,y;     
        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>    

相关文章推荐

html5借助百度地图API来实现地理定位

从百度地图API来看,有点理解了为什么有人说为什么中国程序员为什么叫码农。别人提供给你太多的方便,我们不需自己创造,主要就是熟悉了如何使用然后灵活运用,甚至是copy and then paste。 ...

HTML5地理定位,百度地图API,知识点熟悉

判断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理...

HTML5--地理定位与第三方工具百度地图的应用

前言: 看到了很多技术大牛和相关博客,很少关于HTML5的地理定位的描述,不知道他们是不愿意提及还是使用的少的原因,我个人按一点点经验总结了两方面原因: 第一、服务商方面的原因,因为HTML5的定位是...

HTML5获取当前地理位置并在百度地图上展示的实例

本文介绍使用HTML5 Geolocation API获取当前地理位置,并在百度地图上展示的实例...
  • fdipzone
  • fdipzone
  • 2016年11月24日 19:46
  • 19283

html5定位获取当前位置并在百度地图上显示【转】

用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下...

HTML5 实现地理定位,在谷歌地图上显示你的位置

HTML5提供对用户地理位置进行定位的功能。     可以使用:navigator.geolocation.getCurrentPosition() 方法获取用户的当前经度和纬度     方法如下:首...

html5--位置感知(基于js的地理定位geolocation API)结合Google Maps

1.检测浏览器是否支持地理位置API//检测浏览器是否支持地理位置API(navigator.geolocation) if (navigator.geolocation) { }else{ ...

html5 geolocation/ 百度地图api Geolocation 定位当前城市信息

1、根据当前所处位置 定位所在城市信息 js 百度 geolocation 定位当前城市 var geolocation = new BMap.Geolocation(); ...

html5 geolocation / 百度地图api Geolocation 定位当前城市信息

今日开端:  根据当前所处位置 定位所在城市信息    刚开始采用html5的 geolocation 来获取当前所在经纬度   折腾一番终不能获取城市信息 只能获取到当前的经纬度    查找...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5调用百度地图API进行地理定位实例 ,定位当前位置
举报原因:
原因补充:

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