HTML5調用百度地圖API進行地理定位實例

時間 2019-11-25

標籤 html5 html 調用百度地圖 api 進行地理定位實例欄目 HTML5 简体版

原文原文鏈接

測試有個bug，pc端沒有app端精確javascript

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

簡單版：html

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