金狮贵宾会

登录
免费开通
产品中心
更多服务

微信小程序开发之OFO共享单车剖析,小程序的地图组件

—— 2017 ——
12/20
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2017/12/20 0:00:00 泉源：不详 作者：未知
想学一下微信小程序，，，，，发明文档这工具，，，，，干看真没啥意思。。。以是妄想自己先下手撸一个。。。摩拜单车有自己的小程序，，，，，基本功效都有，，，，，利便又小巧，，，，，甚是喜欢。。。于是我就萌生了一个给ofo共享单车撸一个小程序(不知道为啥ofo没有小程序)的想法。。。
这一节我们先来剖析一下小程序的地图组件

1.准备事情

微信小程序虽然属于腾讯大佬的（给大佬递茶）：微信小程序开发者工具下载，，，，，腾讯开放了小程序个人开发平台，，，，，只需要一个微信号就可以成为小程序开发者了。。。

2.小程序页面

翻开小程序开发者工具，，，，，用微信扫码登录，，，，，建设一个默认的小程序。。。

pages文件夹下存放着小程序所有的营业页面；；；
index文件夹就是一个页面，，，，，index.wxml是页面的结构文件，，，，，类似html。。。
index.wxss是页面的样式，，，，，着实就是css；；；index.js是页面的逻辑，，，，，数据请求与渲染都是都在这个页面完成。。。
logs文件夹存放着小程序开发日志，，，，，现在暂时用不到。。。
utils.js可以编写自己的JavaScript插件也可以引入第三方插件。。。
app.js处理全局的一些逻辑，，，，，好比界说全局变量存放获取的用户信息，，，，，这样每个页面都可以获取用户信息。。。
app.json 是全局设置文件，，，，，好比设置问题栏的配景致等。。。
app.wxss 存放页面的公共样式，，，，，若是多个页面需要用到统一样式，，，，，就可以写在这里。。。
调试按钮用来举行调试，，，，，功效和chrome dev调试工具差未几。。。
项目按钮显示预览二维码，，，，，用于真机调试。。。必需真机调试测试代码，，，，，自带的调试工具有时间会出bug

3.建设页面结构

上一节已经剖析了默认的文件结构以及它们的功效，，，，，现在我们要建设ofo小程序所需要的页面。。。
删除pages下默认的index文件夹，，，，，logs/utils文件夹可选择性删除
在与pages同级目录下建设images文件夹，，，，，存放页面需要用到的图标，，，，，下载图标
本小程序不需要在app.js内里编写内容，，，，，可以先注释这内里的代码
在app.json里，，，，，删掉默认代码，，，，，编写如下代码(注：app.json文件里不可有任何注释，，，，，这里是为了形貌页面功效更直观)：
  1. {
  2.   "pages":[
  3.     "pages/index/index", // 地图页
  4.     "pages/warn/index",  // 车辆报障页
  5.     "pages/scanresult/index", // 扫码乐成页
  6.     "pages/billing/index", // 最先计费页
  7.     "pages/my/index", // 账户页
  8.     "pages/wallet/index", // 钱包页
  9.     "pages/charge/index", // 充值页
  10.     "pages/logs/logs" // 日志页
  11.   ],
  12.   "window":{
  13.     "backgroundTextStyle":"light",
  14.     "navigationBarBackgroundColor": "#b9dd08", // 问题栏配景致
  15.     "navigationBarTitleText": "ofo 共享单车",  // 问题栏文字
  16.     "navigationBarTextStyle":"black" // 问题栏文字样式
  17.   }
  18. }
复制代码

在app.wxss内里。。。我们先把页面的通用样式给出来（这一步我是在所有页面写完后，，，，，发明有些页面有着相同的样式，，，，，再把公共样式抽离出来放在app.wxss内里的。。。）
  1. /**app.wxss**/
  2. .container{
  3.         background-color: #f2f2f2;
  4.         height: 100vh;
  5. }
  6. .title{
  7.         background-color: #f2f2f2;
  8.         padding: 30rpx 0 30rpx 50rpx;
  9.         font-size: 28rpx;
  10.         color: #000;
  11. }
  12. .tapbar{
  13.         display: flex;
  14.         align-items: center;
  15.         justify-content: space-between;
  16.         background-color: #fff;
  17.         padding: 40rpx;
  18. }
  19. .btn-charge{
  20.         width: 90%;
  21.         background-color: #b9dd08;
  22.         margin: 40rpx auto 30rpx;
  23.         text-align: center;
  24. }

生涯后，，，，，你的pages文件夹下就是这样的界面了（在app.json下建设路径会自动建设文件夹，，，，，贼利便）:


4.编写地图首页 (index文件夹)

先来看一下地图首页效果图


页面剖析：
  • 整页显示地图，，，，，宽高占手机窗口的100%
  • 地图之上有五个按钮图标和多个黄色ofo标记：定位按钮，，，，，连忙用车按钮，，，，，举报按钮，，，，，黄色头像按钮和位于地图中心的定位标记。。。


要在页面显示地图，，，，，我们需要在index.wxml引入地图组件：
  1. <!--index.wxml-->
  2. <view class="container">
  3.   <map id="ofoMap"
  4.     latitude="{{latitude}}"  // 纬度
  5.     longitude="{{longitude}}"  // 经度
  6.     scale="{{scale}}"  // 缩放级别
  7.     show-location/>    // 显示带有偏向的小圆点
  8. </view>
复制代码

{{...}} 内里是模板数据，，，，，待会会在index.js里的data工具内里界说。。。

初始化模板数据，，，，，在index.js的data工具里添加如下代码：
  1. //index.js
  2. Page({
  3.   data: {
  4.     scale: 18, // 缩放级别，，，，，默认18，，，，，数值在0~18之间
  5.     latitude: 0, // 给个默认值
  6.     longitude: 0 // 给个默认值
  7.   },
  8.   onLoad: function(options){
  9.     // 1.页面初始化 options为页面跳转所带来的参数
  10.   },
  11.   onReady: function(){
  12.     // 页面渲染完成
  13.   },
  14.   onShow: function(){
  15.     // 页面显示
  16.   },
  17.   onHide: function(){
  18.     // 页面隐藏
  19.   },
  20.   onUnload: function(){
  21.     // 页面关闭
复制代码

这样金狮贵宾会地图就默认中心位置为经度 0，，，，，纬度0。。。虽然可能在开发者工具里显示不出来(有bug)。。。莫慌！由于这不是我们想要的，，，，，我们想要的是我们自己的位置，，，，，以是得先获取我们目今所在位置的经纬度，，，，，在index.js里的onLoad要领里添加如下代码：
  1. onLoad: function(options){
  2.   // 1.页面初始化 options为页面跳转所带来的参数
  3.   
  4.   // 2.挪用wx.getLocation系统API,获取并设置目今位置经纬度
  5.     wx.getLocation({
  6.       type: "gcj02", // 坐标系类型
  7.       // 获取经纬度乐成回调
  8.       success: (res) => { // es6 箭头函数，，，，，可以解绑目今作用域的this指向，，，，，使得下面的this可以绑定到Page工具
  9.         this.setData({  // 为data工具里界说的经纬度默认值设置成获取到的真实经纬度，，，，，这样就可以在地图上显示金狮贵宾会真实位置
  10.           longitude: res.longitude,
  11.           latitude: res.latitude
  12.         })
  13.       }
  14.     });
复制代码

tips：res是一参数工具，，，，，它是由挪用的对应API传过来的，，，，，若是你想知道res的详细值，，，，，可以在乐成回调函数里打。。。篶onsole.log(res)，，，，，然后在控制台输出，，，，，看看它包括什么内容。。。在挪用一个生疏API的时间可以用这种要领审查返回的工具数据，，，，，对处理逻辑很有资助。。。
我们在地图上显示了金狮贵宾会真实位置，，，，，但没有移动到页面的中心位置，，，，，微信提供的wx.moveToLocation()函数可以把目今位置移动到地图中心。。。修改index.js：
  1. //index.js
  2. Page({
  3.   data: {
  4.     scale: 18,
  5.     latitude: 0,
  6.     longitude: 0
  7.   },
  8. // 页面加载
  9.   onLoad: function(options){
  10.   // 1.页面初始化 options为页面跳转所带来的参数
  11.   
  12.   // 2.挪用wx.getLocation系统API,获取并设置目今位置经纬度
  13.     wx.getLocation({
  14.       type: "gcj02", // 坐标系类型
  15.       // 获取经纬度乐成回调
  16.       success: (res) => { // es6 箭头函数，，，，，可以解绑目今作用域的this指向，，，，，使得下面的this可以绑定到Page工具
  17.         this.setData({  // 为data工具里界说的经纬度默认值设置成获取到的真实经纬度，，，，，这样就可以在地图上显示金狮贵宾会真实位置
  18.           longitude: res.longitude,
  19.           latitude: res.latitude
  20.         })
  21.       }
  22.     });
  23. }
  24. // 页面显示
  25.   onShow: function(){
  26.     // 1.建设地图上下文，，，，，移动目今位置到地图中心
  27.     this.mapCtx = wx.createMapContext("ofoMap"); // 地图组件的id
  28.     this.movetoPosition()
  29.   },
  30. // 定位函数，，，，，移动位置到地图中心
  31.   movetoPosition: function(){
  32.     this.mapCtx.moveToLocation();
  33.   }
  34. })
复制代码

我们在onShow函数里为地图组件（id为ofoMap）建设了一个地图上下文，，，，，挪用了自界说函数movetoPosition()，，，，，而在自界说函数里又挪用了moveToLocation这个API，，，，，这样，，，，，页面一显示就在地图中心显示目今位置。。。

我们地图上定位了金狮贵宾会真实位置，，，，，但地图组件照旧默认样式（点击调试，，，，，右侧面板点击wxml可以审查地图组件的默认名堂），，，，，以是我们为地图组件添加样式，，，，，在index.wxss里编写样式：
  1. /**index.wxss**/
  2. .container{
  3.   position: relative;
  4.   width: 100%; // 宽度占满装备
  5.   height: 100vh; // 高度占满装备
  6. }
  7. #ofoMap{
  8.   position: absolute;
  9.   left: 0;
  10.   top: 0;
  11.   right: 0;
  12.   bottom: 0;
  13.   width: 100%;
  14.   height: 100%;
复制代码

生涯刷新，，，，，整个屏幕就都显示地图了>_<

我们再来添加地图上的按钮
着实这里的按钮不是真正的按钮，，，，，它们属于地图上的控件属性，，，，，并且不随着地图移动。。。这里有一个坑：
地图组件属于微信原生组件，，，，，层级最高，，，，，任何元素都不可在地图之上显示，，，，，即无论设置多大z-index都无法显示。。。以是，，，，，要想在地图上添加按钮来知足需求，，，，，就要用到地图控件属性。。。

要添加地图控件，，，，，先在地图组件里声明controls="..."：
  1. <!--index.wxml-->
  2. <view class="container">
  3.   <map id="ofoMap"
  4.     latitude="{{latitude}}"  // 纬度
  5.     longitude="{{longitude}}"  // 经度
  6.     scale="{{scale}}"  // 缩放级别
  7.     controls="{{controls}}" // 地图控件数组，，，，，多个控件存放在数组里
  8.     show-location/>    // 显示带有偏向的小圆点
  9. </view>
复制代码

然后在index.js设置controls(看代码注释相识详细用法)
  1. //index.js
  2. Page({
  3.   data: {
  4.     scale: 18,
  5.     latitude: 0,
  6.     longitude: 0
  7.   },
  8. // 页面加载
  9.   onLoad: function(options){
  10.   // 1.页面初始化 options为页面跳转所带来的参数
  11.   
  12.   // 2.挪用wx.getLocation系统API,获取并设置目今位置经纬度
  13.     ...已省略
  14.    
  15.   // 3.设置地图控件的位置及大。。。，，，，通过装备宽高定位
  16.     wx.getSystemInfo({ // 系统API,获取系统信息，，，，，好比装备宽高
  17.       success: (res) => {
  18.         this.setData({
  19.           // 界说控件数组，，，，，可以在data工具初始化为[],也可以不初始化，，，，，取决于是否需要更好的阅读
  20.           controls: [{
  21.             id: 1, // 给控件界说唯一id
  22.             iconPath: '/images/location.png', // 控件图标
  23.             position: { // 控件位置
  24.               left: 20, // 单位px
  25.               top: res.windowHeight - 80, // 凭证装备高度设置top值，，，，，可以做到在差别装备上效果一致
  26.               width: 50, // 控件宽度/px
  27.               height: 50 // 控件高度/px
  28.             },
  29.             clickable: true // 是否可点击，，，，，默以为true,可点击
  30.           },
  31.           {
  32.             id: 2,
  33.             iconPath: '/images/use.png',
  34.             position: {
  35.               left: res.windowWidth/2 - 45,
  36.               top: res.windowHeight - 100,
  37.               width: 90,
  38.               height: 90
  39.             },
  40.             clickable: true
  41.           },
  42.           {
  43.             id: 3,
  44.             iconPath: '/images/warn.png',
  45.             position: {
  46.               left: res.windowWidth - 70,
  47.               top: res.windowHeight - 80,
  48.               width: 50,
  49.               height: 50
  50.             },
  51.             clickable: true
  52.           },
  53.           {
  54.             id: 4,
  55.             iconPath: '/images/marker.png',
  56.             position: {
  57.               left: res.windowWidth/2 - 11,
  58.               top: res.windowHeight/2 - 45,
  59.               width: 22,
  60.               height: 45
  61.             },
  62.             clickable: false
  63.           },
  64.           {
  65.             id: 5,
  66.             iconPath: '/images/avatar.png',
  67.             position: {
  68.               left: res.windowWidth - 68,
  69.               top: res.windowHeight - 155,
  70.               width: 45,
  71.               height: 45
  72.             },
  73.             clickable: true
  74.           }]
  75.         })
  76.       }
  77.     });
  78. }
  79. // 页面显示
  80.   onShow: function(){
  81.     ...已省略
  82.   },
  83. // 定位函数，，，，，移动位置到地图中心
  84.   movetoPosition: function(){
  85.     this.mapCtx.moveToLocation();
  86.   }
  87. })
复制代码

tips： 我们在给控件设置top,left值时，，，，，用到了装备宽高。。。这样的话金狮贵宾会控件位置就会在所有差别比例的装备上显示相同的效果了

我们再为地图控件绑定事务

现在地图上总共有四个图标可点击(地图中心的标记控件不需要点击，，，，，是用来指示中心位置的)，，，，，所有我们需要为每个控件绑定差别的事务以实现差别的功效：
  • 点击定位控件，，，，，定位目今位置到地图中心，，，，，由于用户在拖动地图，，，，，有时需要回到目今所在位置。。。
  • 点击连忙用车控件，，，，，挪用微信内置扫码功效。。。然后获取开锁密码。。。
  • 点击举报按钮，，，，，前往维修报障页面。。。
  • 点击用户头像按钮，，，，，前往登录页面举行登录，，，，，审查余额，，，，，充值等操作

为控件绑定事务，，，，，同样需要在地图控件举行声明：
  1. <!--index.wxml-->
  2. <view class="container">
  3.   <map id="ofoMap"
  4.     latitude="{{latitude}}"  // 纬度
  5.     longitude="{{longitude}}"  // 经度
  6.     scale="{{scale}}"  // 缩放级别
  7.     controls="{{controls}}" // 地图控件数组，，，，，多个控件存放在数组里
  8.     bindcontroltap="bindcontroltap" // 控件点击事务
  9.     show-location/>    // 显示带有偏向的小圆点
  10. </view>
复制代码


注重： bindcontroltap事务会响应所有控件的点击，，，，，以是，，，，，我们需要凭证控件id来区分控件，，，，，然后响应差别的事务。。。这就是为什么要给控件设置id。。。

在index.js添加bindcontroltap事务：
  1. //index.js
  2. Page({
  3.   data: {
  4.     scale: 18,
  5.     latitude: 0,
  6.     longitude: 0
  7.   },
  8. // 页面加载
  9.   onLoad: function(options){
  10.   // 1.获取准时器，，，，，用于判断是否已经在计费
  11.     this.timer = options.timer;
  12.    
  13.   // 2.挪用wx.getLocation系统API,获取并设置目今位置经纬度
  14.     ...已省略
  15.    
  16.   // 3.设置地图控件的位置及大。。。，，，，通过装备宽高定位
  17.     ...已省略
  18. }
  19. // 地图控件点击事务
  20.   bindcontroltap: function(e){
  21.     // 判断点击的是哪个控件 e.controlId的值是目今点击控件的id。。。
  22.     switch(e.controlId){
  23.       // 点击定位控件
  24.       case 1: this.movetoPosition();
  25.         break;
  26.       // 点击连忙用车，，，，，判断目今是否正在计费，，，，，此处只需要知道是挪用扫码，，，，，后面会讲到这里的判断条件
  27.       case 2: if(this.timer === "" || this.timer === undefined){
  28.           // 没有在计费就扫码
  29.           wx.scanCode({
  30.             success: (res) => {
  31.               // 正在获取密码通知
  32.               wx.showLoading({
  33.                 title: '正在获取密码',
  34.                 mask: true // 显示蒙层
  35.               })
  36.               // 请求服务器获取密码和车号
  37.               wx.request({
  38.                 url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/password',
  39.                 data: {},
  40.                 method: 'GET',
  41.                 success: function(res){
  42.                   // 请求密码乐成隐藏期待框
  43.                   wx.hideLoading();
  44.                   // 携带密码和车号跳转到密码页
  45.                   wx.redirectTo({
  46.                     url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number,
  47.                     success: function(res){
  48.                       wx.showToast({
  49.                         title: '获取密码乐成',
  50.                         duration: 1000
  51.                       })
  52.                     }
  53.                   })           
  54.                 }
  55.               })
  56.             }
  57.           })
  58.         // 目今已经在计费就回退到计费页
  59.         }else{
  60.           wx.navigateBack({
  61.             delta: 1
  62.           })
  63.         }  
  64.         break;
  65.       // 点击包管控件，，，，，跳转到报障页
  66.       case 3: wx.navigateTo({
  67.           url: '../warn/index'
  68.         });
  69.         break;
  70.       // 点击头像控件，，，，，跳转到个人中心
  71.       case 5: wx.navigateTo({
  72.           url: '../my/index'
  73.         });
  74.         break;
  75.       default: break;
  76.     }
  77.   },
  78. // 页面显示
  79.   onShow: function(){
  80.     ...已省略
  81.   },
  82. // 定位函数，，，，，移动位置到地图中心
  83.   movetoPosition: function(){
  84.     this.mapCtx.moveToLocation();
  85.   }
  86. })
复制代码

这里用到的API：
扫码API: wx.scanCode({})
显示加载框： wx.showLoading()
隐藏加载框： wx.hideLoading()
显示提醒框： wx.showToast()
隐藏提醒框： wx.hideToast()
向服务器发送请求：wx.request({})
关闭目今页面，，，，，跳转到指定页面： wx.redirectTo({})
保存目今页面，，，，，跳转到指定页面： wx.navigateTo({})
回退到指定页面： wx.naivgateBack({})
审查详细用法，，，，，审查官方API文档

tips:  跳转页面传参示例:
  1. let num = 1;
  2. wx.navigateTo({
  3.     url: '../other/index?num=' + num
  4. });
  5. // other页面onLoad接受参数
  6. onLoad: function(options){
  7.     console.log(options.num); // 1
  8. }
  9. // 多个参数用&脱离，，，，，如 'index?num=' + num + '&text=' + 'text'
  10.  
复制代码

我们现在在地图上添加单车标记makers和位置连线,照旧在地图组件里先声明：
  1. <!--index.wxml-->
  2. <view class="container">
  3.   <map id="ofoMap"
  4.     latitude="{{latitude}}"  // 纬度
  5.     longitude="{{longitude}}"  // 经度
  6.     scale="{{scale}}"  // 缩放级别
  7.     controls="{{controls}}" // 地图控件数组，，，，，多个控件存放在数组里
  8.     bindcontroltap="bindcontroltap" // 控件点击事务
  9.     polyline="{{polyline}}"  // 位置连线
  10.     markers="{{markers}}" // 标记数组
  11.     bindmarkertap="bindmarkertap" // 标记点击事务
  12.     show-location/>    // 显示带有偏向的小圆点
  13. </view>
复制代码

然后在index.js里界说：
  1. //index.js
  2. Page({
  3.   data: {
  4.     scale: 18,
  5.     latitude: 0,
  6.     longitude: 0
  7.   },
  8. // 页面加载
  9.   onLoad: function(options){
  10.   // 1.获取准时器，，，，，用于判断是否已经在计费
  11.     this.timer = options.timer;
  12.    
  13.   // 2.挪用wx.getLocation系统API,获取并设置目今位置经纬度
  14.     ...已省略
  15.    
  16.   // 3.设置地图控件的位置及大。。。，，，，通过装备宽高定位
  17.     ...已省略
  18.    
  19.   // 4.请求服务器，，，，，显示周围的单车，，，，，用marker标记
  20.     wx.request({
  21.       url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/biyclePosition',
  22.       data: {},
  23.       method: 'GET',
  24.       // header: {}, // 设置请求的 header
  25.       success: (res) => {
  26.           this.setData({
  27.             markers: res.data.data
  28.           })
  29.       }
  30.     })
  31. }
  32. // 地图控件点击事务
  33.   bindcontroltap: function(e){
  34.     ...已省略
  35.   },
  36. // 地图标记点击事务，，，，，毗连用户位置和点击的单车位置
  37.   bindmarkertap: function(e){
  38.     let _markers = this.data.markers; // 拿到标记数组
  39.     let markerId = e.markerId; // 获取点击的标记id
  40.     let currMaker = _markers[markerId]; // 通过id,获取目今点击的标记
  41.     this.setData({
  42.       polyline: [{
  43.         points: [{ // 连线起点
  44.           longitude: this.data.longitude,
  45.           latitude: this.data.latitude
  46.         }, { // 连线终点(目今点击的标记)
  47.           longitude: currMaker.longitude,
  48.           latitude: currMaker.latitude
  49.         }],
  50.         color:"#FF0000DD", // 连线颜色
  51.         width: 1, // 连线宽度
  52.         dottedLine: true // 虚线
  53.       }],
  54.       scale: 18
  55.     })
  56.   },
  57. // 页面显示
  58.   onShow: function(){
  59.     ...已省略
  60.   },
  61. // 定位函数，，，，，移动位置到地图中心
  62.   movetoPosition: function(){
  63.     this.mapCtx.moveToLocation();
  64.   }
  65. })
复制代码

我在easy-mock上伪造了一些单车的经纬度，，，，，是基于我自己的位置。。。你可以在你周围设置经纬度，，，，，使用easy-mock伪造。。。浚浚可以看一下我的数据名堂，，，，，单车经纬度接口

接下来我们为用户拖动地图绑定事务
我们已经为地图控件和标记响应了差别的事务，，，，，现在若是用户拖动地图，，，，，我们需要在拖动周围显示单车，，，，，先在地图组件声明地图拖动事务：
  1. <!--index.wxml-->
  2. <view class="container">
  3.   <map id="ofoMap"
  4.     latitude="{{latitude}}"  // 纬度
  5.     longitude="{{longitude}}"  // 经度
  6.     scale="{{scale}}"  // 缩放级别
  7.     controls="{{controls}}" // 地图控件数组，，，，，多个控件存放在数组里
  8.     bindcontroltap="bindcontroltap" // 控件点击事务
  9.     polyline="{{polyline}}"  // 位置连线
  10.     markers="{{markers}}" // 标记数组
  11.     bindmarkertap="bindmarkertap" // 标记点击事务
  12.     bindregionchange="bindregionchange" // 拖动地图事务
  13.     show-location/>    // 显示带有偏向的小圆点
  14. </view>
  15.  
复制代码

然后在index.js里实现这个事务要领：
  1. //index.js
  2. Page({
  3.   data: {
  4.     scale: 18,
  5.     latitude: 0,
  6.     longitude: 0
  7.   },
  8. // 页面加载
  9.   onLoad: function(options){
  10.   // 1.获取准时器，，，，，用于判断是否已经在计费
  11.     this.timer = options.timer;
  12.    
  13.   // 2.挪用wx.getLocation系统API,获取并设置目今位置经纬度
  14.     ...已省略
  15.    
  16.   // 3.设置地图控件的位置及大。。。，，，，通过装备宽高定位
  17.     ...已省略
  18.    
  19.   // 4.请求服务器，，，，，显示周围的单车，，，，，用marker标记
  20.     ...已省略
  21. }
  22. // 地图控件点击事务
  23.   bindcontroltap: function(e){
  24.     ...已省略
  25.   },
  26. // 拖动地图事务
  27.   bindregionchange: function(e){
  28.     // 拖动地图，，，，，获取附件单车位置
  29.     if(e.type == "begin"){
  30.       wx.request({
  31.         url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/biyclePosition',
  32.         data: {},
  33.         method: 'GET',
  34.         success: (res) => {
  35.           this.setData({
  36.             _markers: res.data.data
  37.           })
  38.         }
  39.       })
  40.     // 阻止拖动，，，，，显示单车位置
  41.     }else if(e.type == "end"){
  42.         this.setData({
  43.           markers: this.data._markers
  44.         })
  45.     }
  46.   },
  47. // 地图标记点击事务，，，，，毗连用户位置和点击的单车位置
  48.   bindmarkertap: function(e){
  49.     ...已省略
  50.   },
  51. // 页面显示
  52.   onShow: function(){
  53.     ...已省略
  54.   },
  55. // 定位函数，，，，，移动位置到地图中心
  56.   movetoPosition: function(){
  57.     this.mapCtx.moveToLocation();
  58.   }
  59. })
复制代码


至此，，，，，首页地图已经完成了，，，，，下一节我们要编写响应的跳转页面

其他章节
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，，若有知识产权人并不肯意我们使用，，，，，若是有侵权请连忙联系。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，，仅系客观性形貌，，，，，如您需要相识该类商品/服务详细的资讯，，，，，请您直接与该类商品/服务的提供者联系。。。


KESION 金狮贵宾会软件

KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。

KESION 一直通过手艺立异，，，，，提供产品和服务，，，，，助力企业向数字化转型，，，，，通过科技驱动商业刷新，，，，，让商业变得更智慧！



▼点击进入金狮贵宾会官网相识更多



上/下篇

  • 微信小程序开发之OFO共享单车,微信小程序扫描二维码

    上一节我们实现首页地图，，，，，也响应了控件点击和用户拖动地图事务。。。这一节我们实现一下点击连忙用车扫码乐成之后的页面逻辑。。。 这里我用了我自己微信号的二维码，，，，，你们可以用你们自...

    微信小程序开发微信小程序 2017/12/20 0:00:00

  • 微信小程序教程入门篇【6】,无编程履历微信小程序基本知识点

    本帖最后由 狂兔科技 于 2016-11-1 22:18 编辑 1. 开篇导言 本节目的：关于入门篇的总结 目的用户：无编程履历，，，，，但对微信小程序感兴趣的同砚。。。 学习目的：对微信小程序的研发，，，，，有提要..

    微信小程序 2017/12/20 0:00:00
换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
微信小程序开发之OFO共享单车剖析,小程序的地图组件 - K