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

最新推荐文章于 2024-05-19 22:05:56 发布

多隆

最新推荐文章于 2024-05-19 22:05:56 发布

阅读量443

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/huayushuangfei/article/details/78325919

版权

前端专栏收录该内容

58 篇文章 1 订阅

订阅专栏

<!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>    

        <script type="text/javascript">    
        //默认地理位置设置为上海市浦东新区  
        var x=114.026044,y=22.530425;     
        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){
                            alert(r.point.latitude);
                            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> 
    </body>    
</html>

多隆

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html> <html> <title>HTML5调用百度地图API进行地理定位实例</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/java
复制链接

扫一扫

专栏目录