高德地图
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申请哦~