利用高德地图定位,PC端
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高德地图定位</title> </head> <body> <h1>高德地图定位</h1> <p id="p1"></p> <p id="p2"></p> <p id="p3"></p> <p id="p4"></p> <p id="p5"></p> <p id="p6"></p> <script src="http://webapi.amap.com/maps?v=1.4.6&key=你申请的key&plugin=AMap.Geocoder"></script> <script> mapObj = new AMap.Map('iCenter');mapObj.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 }); mapObj.addControl(geolocation); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息 }); function onComplete(data){ let res=data; //当前位置 let adress=res.formattedAddress; //地区编码 let adcode=res.addressComponent.adcode; //经纬度 let lng=res.position.getLng(); let lat=res.position.getLat(); //定位类型 let location_type=res.location_type; document.getElementById('p1').innerHTML=`您当前位置：${adress}`; document.getElementById('p2').innerHTML=`地区编码：${adcode}`; document.getElementById('p3').innerHTML=`定位类型：${location_type}`; document.getElementById('p4').innerHTML=`纬度：${lat}`; document.getElementById('p5').innerHTML=`经度：${lng}`; document.getElementById('p6').innerHTML=`信息：${data.message}`; } function onError(data){ document.querySelector('h1').innerHTML=`获取不到位置的原因是:${data.message}`; } </script> </body> </html> |
高德地图定位
您当前位置：四川省……地区编码：510106
定位类型：ip
纬度：30.71623
经度：103.98027
信息：Get ipLocation success.Get address success.
PS:如果想要在手机端定位,就得把页面放在服务器上,以https开头才可以定位,通过这样的形式去访问是可以定位的
监听定位
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高德地图定位</title> </head> <body> <h1>高德地图定位<button id="btn">重新定位</button></h1> <p id="p1"></p> <p id="p2"></p> <p id="p3"></p> <p id="p4"></p> <p id="p5"></p> <p id="p6"></p> <script src="http://webapi.amap.com/maps?v=1.4.6&key=你申请的key&plugin=AMap.Geocoder"></script> <script> var updateLocation = { location_data:{}, loadingbox:null, location_status:1, //状态 0为定位 1ok -1定位失败 //定位成功 location_ok:function (lon,lat,res){}, //定位失败 location_err:function (res) {}, //不管成失败都调 locations:function (lon,lat,res) {}, amapLocation:function () { var map = new AMap.Map('container', { zoom: 15, resizeEnable: true }); map.plugin('AMap.Geolocation', function() { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位，默认:true timeout: 10000, //超过10秒后停止定位，默认：无穷大 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false buttonPosition:'RB' }); map.addControl(geolocation); geolocation.getCurrentPosition(); //定位完成 AMap.event.addListener(geolocation, 'complete', function (res) { updateLocation.location_status=1; var lon = res.position.getLng(); var lat = res.position.getLat(); if(typeof(updateLocation.location_ok)=='function'){ updateLocation.location_ok(lon,lat,res); } if(typeof(updateLocation.locations)=='function'){ updateLocation.locations(lon,lat,res); } }); //定位失败 AMap.event.addListener(geolocation, 'error', function (res) { updateLocation.location_status=-1; if(typeof(updateLocation.location_err)=='function'){ updateLocation.location_err(res); } if(typeof(updateLocation.locations)=='function'){ updateLocation.locations(0,0,res); } }); }); }, //设置定位 get_location:function () { //执行更新定位方法 updateLocation.update_location(); }, //更新定位 update_location:function () { updateLocation.loadingbox=alert('定位中...');//2 updateLocation.location_ok=function ({lon,lat,res}) {}; updateLocation.location_err=function (res) {}; updateLocation.amapLocation(); updateLocation.updateOK(); }, //更新定位成功操作 updateOK:function (){} }; //初始化定位->获取定位 updateLocation.get_location(); //重新定位 btn.onclick=function(){ updateLocation.update_location(); } //定位成功 updateLocation.location_ok=function(lon,lat,res){ console.log('定位成功',lon,lat,res) var addressComponent = res.addressComponent; var area=addressComponent.adcode; var address=res.formattedAddress; var data={'lon':lon,'lat':lat,'area':area,'address':address,} document.getElementById('p1').innerHTML=`您当前位置：${address}`; document.getElementById('p2').innerHTML=`地区编码：${area}`; document.getElementById('p4').innerHTML=`纬度：${lon}`; document.getElementById('p5').innerHTML=`经度：${lat}`; } //定位失败 updateLocation.location_err=function(r){ console.log('定位失败，暂时无法获取您的位置!') } //更新定位成功操作 updateLocation.updateOK=function(){ console.log('更新定位成功') } //完成定位后的回调函数 updateLocation.locations=function(lon,lat,res){ console.log(lon,lat,res) } </script> </body> </html> |
进入页面首先是初始化定位,即获取定位,换了个位置,换个收货地址,需要重新定位
