最近项目中有涉及到,获取当前位置的经纬度和计算后台返回的经纬度与当前位置距离多少公里的需求!然后就去看了看了高德的API,实现了该需求,记录下,免得下次又得去翻文档。
1.首先第一个步骤就是去高德开发平台注册,并且获得一个key值:
登陆之后点击头像进入到应用管理菜单中
然后点击右上角的创建新应用
这就是创建好的新应用了
然后点击右上角的加号,创建新的key
添加这个上面需要的信息,选择自己所需要的
然后点击提交,就能得到key了,然后接下来我们就要开始调用了
2.H5页面端的调用,首页是在页面引入高德地图
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=刚刚申请到的key"></script>
3.在HTML部分,写一个div去接收地图
<div class="map_box" id="map_boxs"></div>
//因为我的设计稿要求是一屏的,所以我这里是百分比宽高
.map_box {
width: 100%;
height: 79.5%;
}
需要注意的一点是,这里的id才是接收地图的标识
4.js部分的代码
var map,marker
map = new AMap.Map('map_boxs', {//注意这里是用div的id接收地图的
center: [114.337516,30.548159],//初始化地图中心点
resizeEnable: false,//是否监控地图容器尺寸变化
zoom: 18, //初始化地图层级
touchZoom:true,//是否手动改变地图层级
})
marker = new AMap.Marker({//地图标点
map:map,
icon: new AMap.Icon({//自定义图标
size: new AMap.Size(37, 29), //图标显示大小
image: "http://wx.bjczxda.com/20181219customer/src/img/position.png",//图标路径
imageSize: new AMap.Size(37,29)//图标缩放大小
}),
position: new AMap.LngLat(114.337516,30.548159)
})
AMap.plugin(['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.ToolBar', 'AMap.Scale'], function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:5s
buttonPosition:'RB', //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: false, //定位成功后是否自动调整地图视野到定位点
});
geolocation.getCurrentPosition(function(status,result){
console.log(result);
if(status=='complete'){
console.log("经度"+result.position.lat+"纬度"+result.position.lng)
console.log(result.position);
}else{
console.log(result.message);
}
});
})
这样就可以成功获取到当前位置的经纬度了
5.然后开始计算两点之间的距离
function GetDistance( lat1, lng1, lat2, lng2){
var radLat1 = lat1*Math.PI / 180.0;
var radLat2 = lat2*Math.PI / 180.0;
var a = radLat1 - radLat2;
var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
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 *6378.137 ;// EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;
}
console.log(GetDistance(30.500543,114.333623,30.554609,114.343786));
这样就可以直接输出两点之间的距离了