实现了距离商家位置显示，用的h5 location实现，待微信jssdk导入后在改进。
export function getDistance(lat1, lng1, lat2, lng2) {
const rad = d => (d * Math.PI) / 180.0;
const EARTH_RADIUS = 6378137.0;
const radLat1 = rad(lat1);
const radLng1 = rad(lng1);
const radLat2 = rad(lat2);
const radLng2 = rad(lng2);
const a = radLat1 - radLat2;
const b = radLng1 - radLng2;
let res = (2 * Math.asin(Math.sqrt((Math.sin(a / 2) ** 2)) + (Math.cos(radLat1)
* Math.cos(radLat2) * (Math.sin(b / 2) ** 2))) * EARTH_RADIUS);
res = res.toFixed(1);
let str = '';
if (res < 999.9) {
str = `${res}m`;
} else {
str = `${(res / 1000).toFixed(1)}km`;
}
return str;
}
- 如果距离商家1000米内返回米单位显示，大于1千米返回千米单位显示
- 用vuex来存储用户地理位置（经纬度），因为h5 location api需要回调函数来获取位置信息，所以通过action的方式来异步改变State
QQ20170317-211026.png
QQ20170317-211715.png
