JS-使用浏览器navigator.geolocation取得地理位置定位

navigator.geolocation.getCurrentPosition(JS回调函数);
现在浏览器H5的地理定位http已经不能使用了,为了安全,要使用https,但是使用https也是使用不了的,获取不了经纬度。

Google声明:https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
 <head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
  <title>Google Maps API Sample</title> 
 </head> 
 <body onload="initdata()" style="font-family: Arial;border: 0 none;"> 
  <div id="allmap"></div>
  
  <script>
    function initdata(){ //页面初始化
        if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showPosition,showError);//HTML5获取GPS设备地理位置信息
        }else{
            document.getElementById("allmap").innerHTML="Geolocation is not supported by this browser.";
        }
    }
    function showPosition(position){
        var x=position.coords.latitude;//获取纬度
        var y=position.coords.longitude;//获取经度
        //转为百度地图坐标
        //注意点:1、coords的经度、纬度顺序(可多组坐标转换,以;(分号)隔开)。2、from与to的准确性。3、callback为回调函数
        var positionUrl = "http://api.map.baidu.com/geoconv/v1/?coords="+y+","+x+"&from=1&to=5&ak=你的密钥&callback=getMap";
        var script = document.createElement('script');
        script.src = positionUrl;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    function getMap(data){
        //返回的状态码,0为正常;1为内部错误;21为from非法;22为to非法;24为coords格式非法;25为coords个数非法,超过限制 
        if(data.status!=0){
            alert("地图坐标转换出错");
            return ;
        }
        //result为数组
        var result = data.result;
        var lon = result[0].x;//经度
        var lat = result[0].y;//纬度
                                                                                                
        // 百度地图API功能
        var map = new BMap.Map("allmap");            // 创建Map实例
        var point = new BMap.Point(lon,lat);
        map.centerAndZoom(point, 14);
        map.addControl(new BMap.ZoomControl());          //添加地图缩放控件
        var marker1 = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker1);              // 将标注添加到地图中
        //创建信息窗口
        var infoWindow1 = new BMap.InfoWindow("您当前所处的位置,经度:"+lon+";纬度:"+lat);
        marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
    }
    //HTML5获取地理位置信息错误处理
    function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      document.getElementById("allmap").innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      document.getElementById("allmap").innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      document.getElementById("allmap").innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      document.getElementById("allmap").innerHTML="An unknown error occurred."
      break;
    }
  }
  </script>
 </body> 
</html>

 

0 Comments

Leave a comment