高德地圖
html頁面
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/> 6 <title></title> 7 <script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=e8496e8ac4b0f01100b98da5bde96597"></script> 8 <script src="mAmaplbs.js"></script> 9 </head> 10 <body> 11 12 <a id="distance" onclick="getDistance()">獲取距離</a> 13 <script> 14 //獲取當前位置(方法名) 15 mMap.getSessionLocation(locationFunc) 16 function locationFunc(){ 17 var data = JSON.parse(sessionStorage.getItem("location")); 18 console.log(data); 19 alert("lng:"+data.position.lng) 20 alert("lat:"+data.position.lat) 21 } 22 23 // 獲取兩點的距離 (m) 24 function getDistance(){ 25 var obj1={lng:116.39,lat: 39.98}; 26 var obj2={lng:116.39,lat: 38.98}; 27 alert(mMap.distance(obj1,obj2)); 28 mMap.serverDistance(obj1,obj2); 29 } 30 </script> 31 </body> 32 </html>
mAmaplbs.js
//用戶位置定位 使用geolocation定位
var mMap=function(){
function rad(d){
return d*Math.PI/180.0;
}
this.map={},
this.geolocation={},
this.k=0,
//加載地圖，調用瀏覽器定位服務
this.initMap=function(mapContainer,completFunc){
if(typeof(AMap)=="object"){
this.map = new AMap.Map(mapContainer, {
resizeEnable: true
});
this.map.plugin('AMap.Geolocation', function () {
this.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
});
this.map.addControl(this.geolocation);
AMap.event.addListener(this.geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(this.geolocation, 'error', onError); //返回定位出錯信息
});
function onComplete(data){
console.log(completFunc)
console.log(data)
if(completFunc){
completFunc(data);
}
}
function onError(){
var str = '定位失敗,';
str += '錯誤信息：'
switch(data.info) {
case 'PERMISSION_DENIED':
str += '瀏覽器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '無法獲得當前位置';
break;
case 'TIMEOUT':
str += '定位超時';
break;
default:
str += '未知錯誤';
break;
}
alert(str)
}
}
},
this.getCurrentPosition=function(callback){
if(typeof(this.geolocation.getCurrentPosition)!='undefined'){
this.geolocation.getCurrentPosition();
}else{
setTimeout(function(){
//將獲得的經緯度信息，放入sessionStorge
this.getSessionLocation(callback)
},200)
}
},
this.distance = function(obj1,obj2){//return：m
var lng=new AMap.LngLat(obj1.lng, obj1.lat);
var lag=new AMap.LngLat(obj2.lng, obj2.lat);
var ss=lng.distance(lag);
return ss;
},
this.getSessionLocation=function(callback){
if(sessionStorage.getItem('location')){
callback();
}else{
this.initMap('',function(data){
sessionStorage.setItem("location",JSON.stringify(data))
callback();
});
this.getCurrentPosition(callback);
}
},
/*
*兩點之間的距離
*（lng1.lat1）地址一的經緯度
*（lng2.lat2）地址一的經緯度
*單位米
*/
this.serverDistance = function(obj1,obj2){//return：m
var radLat1 = rad(obj1.lat);
var radLat2 = rad(obj2.lat);
var a = radLat1 - radLat2;
var b = rad(obj1.lng)- rad(obj2.lng);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
s = s *6378137;
s = Math.round(s * 10000)/10000 ;
return s;
}
return this;
}();
小結：以上代碼放到本地的話可以獲取到當前位置的經緯度以及具體位置，而當放到項目中的時候，只能獲取經緯度，獲取具體位置失敗，報錯說是key 或者network失敗
解決方案： key是企業給的，感覺不會是這個問題，然而現在還是無解，不過幸好給出了當前位置的經緯度，通過交互給后台小哥哥傳遞經緯度，后台小哥通過對經緯度的判斷 來確定具體位置然后返回給寄幾
mMap.getSessionLocation(locationFunc) function locationFunc(){ var data = JSON.parse(sessionStorage.getItem("location")); console.log(data); var lng = data.position.lng; var lat = data.position.lat; $.ajax({ url:'', type: 'post', dataType: 'json', data:{ lng:lng, lat:lat } , success:function (res) { console.log(res); } }) }
復制高德地圖API實例中心的代碼到自己的編輯器在瀏覽器里查看時，位置並沒有出來，無奈？？？
至於為什么不用百度地圖API ???
定位不是有一點點的不准啊~~~~，不過還是放上代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MU3NreHexTG9wvfCv0zjddLeEIbzLPCX"></script> <title>百度地圖的定位</title> </head> <body> <div id="allmap" style="width: 100%;height: 500px;"></div> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(108.95,34.27); map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){console.log(r.point) if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk);//標出所在地 map.panTo(r.point);//地圖中心移動 //alert('您的位置：'+r.point.lng+','+r.point.lat); var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的經緯度查找所在地省市街道等信息 var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = rs.addressComponents; console.log(rs.address);//地址信息 alert(rs.address);//彈出所在地址 }); }else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) </script> </body> </html>
上面代碼里的key值要到官方API申請哦~
寫的好亂~~~正在努力改進!!!