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

最新推荐文章于 2019-01-07 16:41:03 发布

weixin_34220623

最新推荐文章于 2019-01-07 16:41:03 发布

阅读量267

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3549294/blog/1845418

版权

2019独角兽企业重金招聘Python工程师标准>>>

测试有个bug，pc端没有app端精确

<!DOCTYPE html>  
<html>  
<title>HTML5调用百度地图API进行地理定位实例</title>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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=116.404269,y=39.916706;   
    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>

简单版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地理定位</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
     
</head>
<body>
<script>
    //获取当前地理信息
    window.navigator.geolocation.getCurrentPosition(success,error);
   //获取地理信息成功时的回调函数
    function success(position) {
        alert("成功获取您的地理信息");
        //获取经度维度信息
        //coords属性
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        //打印纬度,经度信息
       alert(latitude);
       alert(longitude)
    }
    //获取地理信息失败时的回调函数
    function error(msg) {
        alert("获取您的地理信息失败");
    }
</script>
</body>
</html>

转载于:https://my.oschina.net/u/3549294/blog/1845418