#yyds干货盘点#愚公系列2022年12月微信小程序-项目篇(公交查询)-01周边站点

Posted 2022-12-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#愚公系列2022年12月微信小程序-项目篇(公交查询)-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；