百度高德腾讯的H5定位

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>浏览器定位</title>

    <!-- 高德 -->
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.0&key=50a21f2369b88ba042941b43edbbb242"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

    <!-- 百度 -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=uRhBKfzW36pGW8KGkyAhpwXDYwmjNcZP"></script>

    <!-- 腾讯 -->
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>


<body>

<div id='container'></div>
<div id="tip"></div>

<p id="demo">腾讯地图定位成功：<br /></p>

<script type="text/javascript">

// 腾讯地图部分
                                            //腾讯的key
    var geolocation = new qq.maps.Geolocation("FEVBZ-N5K6W-NPXRC-OQRNC-SJK6Q-U4BGY", "myapp");

    //精确定位
    geolocation.getLocation(showPosition, showErr, options)

    var options = {timeout: 3000};

    function showPosition(position) {
        
        console.log("腾讯定位");
        console.log(position);

        document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
    };

    function showErr() {
        console.log("腾讯定位失败");
        document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = "腾讯地图定位失败";
    };



// 高德地图部分

    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('iCenter');
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    //解析定位结果
    function onComplete(data) {
        var str=['高德地图定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        if(data.accuracy){
             str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        str.push('位置:' + data.formattedAddress);
        
        document.getElementById('tip').innerHTML = str.join('<br>');

    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败';
    }







// 百度地图部分 

    if(navigator.geolocation){  
      navigator.geolocation.getCurrentPosition(  
          function(p){  
              var latitude=p.coords.latitude;//获取坐标点纬度  
              var longitude=p.coords.longitude;//获取坐标点经度  
              //以指定的经度与纬度创建一个坐标点  
              var po=new BMap.Point(longitude,latitude);  
              //创建一个地理解析器  
              var geocoder=new BMap.Geocoder();  
              //获取位置  
              geocoder.getLocation(po,function(rs){  
                  //获取地理组件  
                  var addComp=rs.addressComponents;  
                  //获取省份  
                  var province=addComp.province;  
                  //获取城市  
                  var city=addComp.city;  
                  //获取区县  
                  var district=addComp.district;  
                  //获取街道  
                  var street=addComp.street;  
                  //获取街道号  
                  var streetNumber=addComp.streetNumber; 


                var str=['百度地图定位成功'];
                str.push('经度：' + longitude);
                str.push('纬度：' + latitude);
                str.push('位置:' + province+city+district+street+streetNumber);
                
                document.getElementById('container').innerHTML = str.join('<br>');


              });  
          },function(e){  
              switch (e.code) {  
                  case e.TIMEOUT:  
                      alert("定位失败，请求获取用户位置超时");  
                      break;  
                  case e.PERMISSION_DENIED:  
                      alert("您拒绝了使用位置服务功能，查询已取消");  
                      break;  
                  case e.POSITION_UNAVAILABLE:  
                      alert("抱歉，暂时无法为您所在的星球提供位置服务");  
                      break;  
                  case e.UNKNOWN_ERROR:  
                      alert("发生一个位置错误");  
                      break;  
              }  
          },{  
              //指示浏览器获取高精度的位置，默认false  
              enableHighAcuracy: true,  
              //指定获取地理位置的超时时间，默认不限时，单位为毫秒  
              timeout:5000,  
              //最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置  
              maximumAge:2000  
          }  
      );  
    }else{  
      alert("不支持");  
    } 



</script>

<style type="text/css">
    #container{
        margin: 200px auto 0 auto;
    }
    #demo{
        margin: 360px auto 0 auto;
        background-color: #efefef;
    }

</style>

</body>
</html>
百度高德腾讯的H5定位

猜你喜欢
