【愚公系列】2022年04月微信小程序-项目篇(公交查询)-01周边站点-阿里云开发者社区

【愚公系列】2022年04月微信小程序-项目篇(公交查询)-01周边站点

2022-05-09 216

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【愚公系列】2022年04月微信小程序-项目篇(公交查询)-01周边站点

前言

1.公交车站的意义

转变现有出行模式，倡导公共交通和混合动力汽车、电动车、自行车等低碳或无碳方式，同时也丰富出行生活，增加出行项目。

扭转奢华浪费之风，强化清洁、方便、舒适的功能性，提升文化的品牌性。

加强出行智能化发展，提高运行效率，同时及时全面引进节能减排技术，降低碳消耗，最终形成全产业链的循环经济模式。

2.公交车站的作用

对老百姓来说，公共汽车出行，成本低廉。

对国家来说，公共汽车可以减少私家车的出行，对大自然来说是环保的。

公共汽车可以减少交通压力。

公共汽车往往能涵盖这个城市的绝大多数地区，对偏远地区来说是很方便的。

一、周边站点

小程序的周边站点是实时获取当前登录用户的位置信息，进而给出附件公交车站信息，以便用户选择乘车方案。

1.wxml

<!--pages/research/research.wxml-->
<view class="zhenggeyemian">
  <view class='ttop'>
    <view class="topsearch">
      <view class="topsearchtitle">
        <view class="leftspan">
          {{locationInfo.city}}
        </view>
        <image src="../../imgs/search.png">
        </image>
        <view bindtap="jumpSearch" style='color:grey;font-size:13px;'>
          请输入搜索线路
        </view>
      </view>
    </view>
    <view class="danghang">
      <view class="danghang2" data-type="1" style='{{type=="1"?"border-bottom: 2px solid red":""}}' bindtap='changeType'>周边站点</view>
      <view class="danghang3" data-type="2" style='{{type=="2"?"border-bottom: 2px solid red":""}}' bindtap='changeType'>地图</view>
    </view>
  </view>
  <view class='middles'>
    <view class="middle" wx:if="{{type=='1'}}" wx:for="{{stationList}}" wx:key="" wx:for-index="idx1" wx:for-item="station">
      <view class='middlesingle'>
        <view class='middlesingletop' bindtap='jumpLinesShow' data-station="{{station.station}}">
          <view class='middlesingletopleft'>{{station.station}}</view>
          <view class='middlesingletopright'>
            <view class='mi'>米</view>
            <view class='middlesingletoprightredfont'>
              {{station.distance}}
            </view>
            <view class='mi'> 距离你</view>
            <view class="imagess">
              <image src="../../imgs/distance.png"></image>
            </view>
          </view>
        </view>
        <view class='middlesinglebottom' wx:for="{{station.lines}}" wx:key="" wx:for-index="idx2" wx:for-item="line" bindtap='jumpLineDetail' data-line='{{line}}' data-station="{{station.station}}">
          <view class='ditiemz'>{{line}}</view>
        </view>
      </view>
    </view>
    <view class="map" wx:if="{{type=='2'}}">
      <map id="map" longitude="{{locationInfo.longitude}}" latitude="{{locationInfo.latitude}}" scale="16" markers='{{markers}}' bindcallouttap='callouttap' show-location style="width: 100%;height:430px;"></map>
    </view>
  </view>
</view>

2.js

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap/qqmap-wx.js');
var qqmap;
var config = require('../../libs/config.js');
var app = getApp()
// pages/research/research.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    locationInfo: {},
    stationList: [],
    type: "1",
    markers: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this
    // 实例化API核心类
    qqmap = new QQMapWX({
      key: config.Config.qqmapkey
    })
    _this.getLocationInfo()
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    this.getLocationInfo()
  },
  /**
   * 得到经纬度和城市
   */
  getLocationInfo() {
    var _this = this
    app.showLoading("拉取路线列表")
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        var locationInfo = _this.data.locationInfo
        locationInfo.latitude = res.latitude
        locationInfo.longitude = res.longitude
        // 调用接口
        qqmap.reverseGeocoder({
          location: {
            latitude: locationInfo.latitude,
            longitude: locationInfo.longitude
          },
          success: function (res) {
            locationInfo.city = res.result.address_component.city
            locationInfo.address = res.result.formatted_addresses.recommend
            _this.setData({
              locationInfo: locationInfo
            })
            _this.getStationList()
          },
          fail: function (res) {
            console.log(res);
            app.hideLoading(locationInfo)
          },
          complete: function (res) {
            // complete
            // console.log(_this.data.locationInfo)
          }
        })
      }
    })
  },
  /**
   * 得到周边站址
   */
  getStationList() {
    var _this = this
    // 调用接口
    var locationInfo = _this.data.locationInfo
    console.log(locationInfo)
    wx.request({
      url: 'http://api.jisuapi.com/transit/nearby', //周围地址接口
      data: {
        appkey: config.Config.busappkey,
        city: locationInfo.city,
        address: locationInfo.address
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        var stationList = res.data.result
        console.log(stationList)
        console.log(stationList.length)
        for (var i = 0; i < stationList.length; i++) {
          if(stationList[i].lines !=undefined){
            var temp = []
            for (var j = 0; j < stationList[i].lines.length; j++) {
              var line = stationList[i].lines[j]
              var newLine = line.substring(0, line.indexOf('('))
              if (temp.indexOf(newLine) == -1) {
                temp.push(newLine)
              }
            }
            stationList[i].lines = temp
          }
        }
        _this.setData({
          stationList: stationList
        })
        //设置标记点
        _this.setMapMarkers()
        console.log(_this.data.stationList)
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        app.hideLoading()
        // console.log(res);
        wx.hideNavigationBarLoading() //完成停止加载
        wx.stopPullDownRefresh() //停止下拉刷新
      }
    })
  },
  jumpLinesShow(e) {
    var _this = this
    console.log(e)
    var station = e.currentTarget.dataset.station
    var city = _this.data.locationInfo.city
    wx.navigateTo({
      url: '../linesShow/linesShow?station=' + station + '&city=' + city
    })
  },
  jumpLineDetail(e) {
    var _this = this
    var line = e.currentTarget.dataset.line
    var station = e.currentTarget.dataset.station
    var city = _this.data.locationInfo.city
    wx.navigateTo({
      url: '../lineDetail/lineDetail?line=' + line + '&city=' + city + '&station=' + station
    })
  },
  jumpSearch(e) {
    var _this = this
    var city = _this.data.locationInfo.city
    wx.navigateTo({
      url: '../search/search?city=' + city
    })
  },
  changeType(e) {
    var _this = this
    var type = e.currentTarget.dataset.type
    _this.setData({
      type: type
    })
  },
  setMapMarkers() {
    var _this = this
    var stationList = _this.data.stationList
    for (var i = 0; i < stationList.length; i++) {
      (function (i) {
        wx.request({
          url: 'http://api.map.baidu.com/geoconv/v1/', //仅为示例，并非真实的接口地址
          data: {
            ak: config.Config.bmapkey,
            coords: stationList[i].lng + ',' + stationList[i].lat,
            from: 5, //百度地图采用的经纬度坐标;
            to: 3 //国测局（gcj02）坐标;
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            // console.log(res)
            var lnglat = res.data.result[0]
            var marker = {}
            marker.iconPath = '../../imgs/location.png'
            marker.id = i
            marker.latitude = lnglat.y
            marker.longitude = lnglat.x
            marker.width = 20
            marker.height = 20
            marker.callout = {
              content: stationList[i].station,
              color: 'red',
              bgColor: '#fcfcfc',
              padding: 3,
              fontSize: 18,
              borderRadius: 10,
              display: 'BYCLICK',
              textAlign: 'left'
            }
            var markers = _this.data.markers
            markers.push(marker)
            _this.setData({
              markers: markers
            })
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            // console.log(res);
          }
        })
      })(i)
    }
  },
  callouttap(e) {
    console.log(e)
    var _this = this
    var id = e.markerId
    var stationList = _this.data.stationList
    var station = stationList[id].station
    e.currentTarget.dataset.station = station
    _this.jumpLinesShow(e)
  }
})

3.wxss

/* pages/research/research.wxss */
.uszhenggeyemianerinfo {
  float: left;
  width: 100%;
}
.zhenggeyemian{
  float: left;
  width: 100%;
  height: 100px;
}
.topsearch {
  width: 100%;
  float: left;
  height: 40px;
  padding-top: 6px;
  background-color: white;
}
.topsearchtitle {
  width: 90%;
  float: left;
  height: 20px;
  line-height: 20px;
  padding: 8px 10px 5px 10px;
  background-color: #eee;
  border-radius: 30px;
}
.leftspan {
  float: left;
  width: 13%;
  height: 100%;
  background-color: #eee;
  border: 1px solid #eee;
  font-size: 12px;
}
.topsearchtitle image {
  float: left;
  width: 8%;
  height: 100%;
  background-color: #eee;
  border: 1px solid #eee;
  font-size: 12px;
}
.topsearchtitle input {
  float: left;
  width: 76%;
  height: 100%;
  background-color: #eee;
  border: 1px solid #eee;
  font-size: 12px;
}
.ttop{
 position: fixed;
 float: left;
  width: 100%;
 z-index:1；
}
.danghang {
  float: left;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: white;
  border-bottom: 1px solid #eee;
  font-size: 12px;
}
.danghang2 {
  float: left;
  width: 50%;
  height: 39px;
  line-height: 39px;
  background-color: white;
  text-align: center;
  font-size: 12px;
}
.danghang3 {
  float: left;
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: white;
  font-size: 12px;
}
.middles{
  float: left;
  width: 100%;
    margin-top:88px;
}
.middle {
  float: left;
  width: 100%;
  }
.middlesingle {
  margin-top: 10px;
  float: left;
  width: 99%;
  border: 1px solid #eee;
}
.middlesingletop {
  float: left;
  width: 100%;
  height: 35px;
  line-height: 35px;
  background-color: #eff;
  font-size: 12px;
}
.middlesingletopleft {
  float: left;
  width: 45%;
  height: 35px;
  line-height: 35px;
  background-color: #eff;
  font-size: 12px;
  padding: 0px 5px 0px 5px;
}
.middlesingletopright {
  float: left;
  width: 45%;
  text-align: right;
  height: 35px;
  line-height: 35px;
  background-color: #eff;
  font-size: 12px;
}
.imagess image{
 height: 40%;
  width: 40%;
}
.imagess{
 float: right;
  height: 35px;
  width: 30%;
  line-height:35px;
}
.middlesingletoprightredfont{
    float: right;
    color: red;
    font-size: 14px;
}
.mi{
  float: right;
}
.middlesinglebottom {
  float: left;
}
.ditiemz {
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  font-size: 12px;
  border: 1px solid #eee;
}
.map{
  position:fixed;
  float: left;
  width: 100%;
  height: 430px;
   z-index:1；
}

【愚公系列】2022年04月微信小程序-项目篇(公交查询)-01周边站点

前言

1.公交车站的意义

2.公交车站的作用

一、周边站点

1.wxml

2.js

3.wxss

4.实际效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-01周边站点

前言

1.公交车站的意义

2.公交车站的作用

一、周边站点

1.wxml

2.js

3.wxss

4.实际效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景

【愚公系列】2022年04月微信小程序-项目篇(公交查询)-01周边站点