正文 

当前位置： 首页 > 代码 > java教程

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

author author     2022-12-10     722

关键词：

前言

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；

4.实际效果

#yyds干货盘点#愚公系列2022年12月微信小程序-webgl立体图形的绘制(代码片段)

前言在现实中webgl的用途很多，比如医院运维网站，地铁运维网站，海绵城市，可以以三维网页形式展示出现实状态。WebGL相关文档：http://doc.yonyoucloud.com/doc/wiki/project/webgl/webgL-fundamentals.html一、webgl的使用安装第三方包：npmi--savet... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-全局配置属性

一、app.json配置属性类型必填描述最低版本entryPagePathstring否小程序默认启动首页pagesstring[]是页面路径列表windowObject否全局的默认窗口表现tabBarObject否底部tab栏的表现networkTimeoutObject否网络超时时间debugboolean否是否开启debug模式，... 查看详情

#yyds干货盘点#愚公系列2022年12月微信小程序-项目篇(公交查询)-06站点查询(代码片段)

前言1.相关API接口地址：https://api.jisuapi.com/transit/station返回格式：JSON,JSONP请求方法：GETPOST请求示例：https://api.jisuapi.com/transit/station?cityid=113&station=西溪竞舟苑&appkey=yourappkey请求参数：参数名称类型必填说明citystring 查看详情

#yyds干货盘点#愚公系列2022年12月微信小程序-three.js绘制球体(代码片段)

前言Three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。一个典型的Three.js程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的... 查看详情

#yyds干货盘点#愚公系列2022年12月微信小程序-webgl画渐变色正方形(代码片段)

前言在现实中webgl的用途很多，比如医院运维网站，地铁运维网站，海绵城市，可以以三维网页形式展示出现实状态。WebGL相关文档：http://doc.yonyoucloud.com/doc/wiki/project/webgl/webgL-fundamentals.html一、webgl的使用安装第三方包：npmi--savet... 查看详情

#yyds干货盘点#愚公系列2022年12月微信小程序-图片加载和全屏适配问题(代码片段)

前言在使用图片问题中可能会遇到各种各样的问题，比如图片加载不出来，图片显示在不同机型效果不同，图片加载展示问题等等。微信小程序image相关属性如下：属性类型默认值必填说明最低版本srcstring否图片资源地址1.0.0modes... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-component组件的扩展(代码片段)

一、Component组件的扩展//behavior.jsmodule.exports=Behavior(definitionFilter(defFields)defFields.data.from=behavior,)//component.jsComponent(data:from:component,behaviors:[require(behavior.js)],ready()consol 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-引用(代码片段)

前言1.模板的引入方式WXML提供两种文件引用方式import和includeimport：导入模板并没有真正的使用include：直接引入页面元素，已经使用了2.模板和组件的比较template（模板）:是可以在wxml中引用的代码，就是在wxml中引用公用的wxml类... 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-导航(跳转)(代码片段)

前言1.navigatornavigator是页面跳转的标签，具体参数如下：属性类型默认值必填说明最低版本targetstringself否在哪个目标上发生跳转，默认当前小程序2.0.7urlstring否当前小程序内的跳转链接1.0.0open-typestringnavigate否跳转方式1.0.0deltanumbe... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-页面生命周期(代码片段)

一、页面生命周期1.JS使用注册小程序中的一个页面。接受一个Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。小程序页面的生命周期函数如下：属性类型说明dataObject页面的初始数据optionsObject页面的组... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-数据绑定(代码片段)

前言1.小程序页面结构微信小程序的页面结构主要是分别由四个文件组成：js(逻辑处理文件)：负责页面逻辑内容的处理，遵循js语言框架。json(配置文件)：用来设置页面的窗口内容，遵循JSON语法规范。wxml（页面结构文件或视图... 查看详情

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

前言1.公交车站的意义转变现有出行模式，倡导公共交通和混合动力汽车、电动车、自行车等低碳或无碳方式，同时也丰富出行生活，增加出行项目。扭转奢华浪费之风，强化清洁、方便、舒适的功能性，提升文化的品牌性。加... 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-导航(功能页)(代码片段)

前言functional-page-navigator组件：是一个非常强大的组件，用于跳转插件的功能页，主要的参数如下：属性类型默认值必填说明最低版本versionstringrelease否跳转到的小程序版本，线上版本必须设置为release2.1.0namestring否要跳转到的功... 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-地图的使用之点聚合(代码片段)

前言地图基础属性：属性类型默认值必填说明最低版本longitudenumber是中心经度1.0.0latitudenumber是中心纬度1.0.0scalenumber16否缩放级别，取值范围为3-201.0.0min-scalenumber3否最小缩放级别2.13.0max-scalenumber20否最大缩放级别2.13.0markersArray.<... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-循环的使用(代码片段)

一、列表渲染1.wx:for的item和index在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item<viewwx:for="array">index:i... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-场景值(代码片段)

前言场景值就是进入该小程序的来源，就是用户是通过什么途径点进的小程序。通过app中的onLaunch或onShow方法中可以获取到场景值。比如获取到的场景值是1005，表示用户是通过微信顶部的搜索框搜索到的该小程序。通过这个场景... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-应用生命周期和全局变量(代码片段)

前言从软件的角度来看，生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。微信小程序的生命周期：应用生命周期页面生命周期一、应用生命周期1.JS配置App(//生命周期回调——监听小程序初始化onLaunch(options) co... 查看详情

#yyds干货盘点#愚公系列2022年09月微信小程序-webgl画正方形(代码片段)

前言在现实中webgl的用途很多，比如医院运维网站，地铁运维网站，海绵城市，可以以三维网页形式展示出现实状态。WebGL相关文档：http://doc.yonyoucloud.com/doc/wiki/project/webgl/webgL-fundamentals.html一、webgl的使用安装第三方包：npmi--savet... 查看详情