永生APP开发总结

2019-01-15

断断续续开发了快一个月，完成了两款APP，简单的总结下，好记性不如烂笔头嘛

获取天气相关情况

通过定位得到当前位置，调用getWeather方法传入adCode，将获取到的天气相关信息保存到中，方便使用

/**
 * 获取天气情况，使用高德天气
 */
getWeather (adcode) { // adcode为addressCode
  let self = this
  AMap.plugin('AMap.Weather', () => {
    var weather = new AMap.Weather()
    weather.getLive(adcode, (err, data) => {
      console.log(err, data)
      self.$store.dispatch('SetWeathers', data) // 保存到vuex中
    })
  })
}

绘制周边地图

点击查看周边地图
初始化滴哦图，以当前定位为地图中心，再次基础上绘制圆形区域标记

initMap () {
  this.position = { ...this.$route.query }
  let lat = this.position.lat || 118.21
  let lng = this.position.lng || 120.30
  var map = new AMap.Map('aroundMap', {
    resizeEnable: true, // 
    rotateEnable: true, // 是否可旋转
    zoom: 14,
    expandZoomRange: true,
    zooms: [3, 20], // 设置地图zoom级别
    center: [lng, lat]
  })
  var circle = new AMap.Circle({ // 源泉覆盖物
    center: new AMap.LngLat(lng, lat), // 圆心位置
    radius: 1000, // 半径
    strokeColor: '#F33', // 线颜色
    strokeOpacity: 0.5, // 线透明度
    strokeWeight: 1, // 线粗细度
    fillColor: '#ee2200', // 填充颜色
    fillOpacity: 0.2 // 填充透明度
  })
  map.add(circle)
  return map
}

路径规划

通过起点重点经纬度，规划驾车路线

高德API-路径规划

需要两个容器，id为navigatorMap的容器用来绘制地图，id为panel的容器用来绘制导航结果相关面板

initMap () {
  this.toPosition = { ...this.$route.query }
  let fromLat = this.positions.lat
  let fromLng = this.positions.lng

  let toLat = this.toPosition.lat
  let toLng = this.toPosition.lng
  if (this.positions.lng) {
    var map = new AMap.Map('navigatorMap', {
      resizeEnable: true,
      center: [fromLng, fromLat], // 地图中心点
      zoom: 10 // 地图显示的缩放级别
    })
    var driving = new AMap.Driving({
      map: map,
      panel: 'panel'
    })
    driving.search(
      new AMap.LngLat(fromLng, fromLat), // 起点
      // new AMap.LngLat(116.427281, 39.903719), // 起点
      new AMap.LngLat(toLng, toLat), // 终点
      (status, result) => {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
          console.log('绘制驾车路线完成')
        } else {
          this.$toast('路线规划失败')
          console.error('获取驾车数据失败：' + result)
        }
      })
  } else {
    this.$toast('定位失败，请检查设置')
  }
}

拨打电话

使用a标签的href，tel后面跟上制定的电话号码，即可实现

1	a.tel(:href="`tel:${telePhone}`")