自定义导航栏的使用

方法1：

  1. 在main.js中全局注册一个通用的自定义导航栏组件
  2. App.vue中通过手机设备，获取不同的导航栏尺寸
  3. 在需要自定义导航的页面中使用cu-custom组件
  4. 关闭默认的导航栏

方法2：

  1. 使用ColorUI的操作条，直接作为导航栏使用

城市定位功能

高德web服务API

  1. 申请高德的web服务API的key
  2. 使用uni.getLocation获取当前用户位置经纬度
  3. 使用高德的api接口，逆地理编码获取位置信息
    API接口地址
  4. 核心代码
  1. uni.getLocation({
  2.     success: ({longitude,latitude}) => { //获取用户经纬度
  3.         console.log(longitude,latitude);
  4.         uni.request({ //请求高德服务API，通过经纬度获取位置信息
  5.             url:`https://restapi.amap.com/v3/geocode/regeo?key=自己的key&location=${longitude},${latitude}`,
  6.             method:'GET',
  7.             success: (res) => {
  8.                 console.log(res);
  9.                 let {district} = res.data.regeocode.addressComponent
  10.                 this.district = district
  11.             }
  12.         })
  13.     }
  14. })

地址列表索引

地址数据包

  1. 列表组件引用
  2. 列表组件数据渲染

vuex状态机的引入

在状态机中维护定位信息

使用步骤，跟vue中一样，但是不需要安装

详情页渲染

  1. map组件的使用
  2. 根据两组经纬度计算距离

注意保证当前用户定位正确获取后再测距

  1. function (lat1, lng1, lat2, lng2) {
  2.     var radLat1 = lat1 * Math.PI / 180.0;
  3.     var radLat2 = lat2 * Math.PI / 180.0;
  4.     var a = radLat1 - radLat2;
  5.     var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
  6.     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)));
  7.     s = s * 6378.137;
  8.     s = Math.round(s * 10000) / 10000;
  9.     return s
  10. };