微信小程序仿摩拜单车

本小程序仿摩拜单车的地图显示和拖动部分，单车数据采用周边厕所模拟。index.wxml如下：

<map id="map" bindcontroltap="bindcontroltap" bindregionchange="bindregionchange"

longitude="{{jd}}" latitude="{{wd}}" markers="{{markers}}" controls="{{controls}}"

style="width: 100%; height: {{height}}px;" scale="16" show-location>
</map>

拖动地图，视野变化设置bindregionchange

页面加载时设置地图高度，control标注，头部广告及注册登录、返回当

前位置、优惠券、充值等。

wx.getSystemInfo({
success: function (res) {
maph = res.windowHeight
mapw = res.windowWidth
that.setData({
height: maph,
controls: [
{
id: 1,
iconPath: '../libs/banner.jpg',
position: {
left: 10,
top: 10,
width: 390,
height: 80
},
clickable: true
},
{
id: 2,
iconPath: '../libs/gps.jpg',
position: {
left: 10,
top: maph - 50,
width: 40,
height: 40
},
clickable: true
},
{
id: 3,
iconPath: '../libs/log.jpg',
position: {
left: mapw / 2 - 80,
top: maph - 50,
width: 150,
height: 40
},
clickable: true
},
{
id: 4,
iconPath: '../libs/gift.jpg',
position: {
left: mapw - 60,
top: maph - 120,
width: 40,
height: 40
},
clickable: true
},
{
id: 5,
iconPath: '../libs/cost.jpg',
position: {
left: mapw - 60,
top: maph - 50,
width: 40,
height: 40
},
clickable: true
}
]
})

由于需要频繁更新地图中心单车数据，对更新标记进行封装为getbike

function getbike (){
console.log(mapcenter)
qqmapsdk.search({
location: {
latitude: mapcenter[0],
longitude: mapcenter[1]
},
keyword: '厕所',
success: function (res) {
var mark = []
var getdata = res.data
for (var i = 0; i < getdata.length; i++) {
mark[i] = {
iconPath: "../libs/mobi.jpg",
id: i,
latitude: getdata[i].location.lat,
longitude: getdata[i].location.lng
}
mark.push({
iconPath: "../libs/c.png",
id: 99,
latitude: mapcenter[0],
longitude: mapcenter[1]
})
}
that.setData({
markers: mark
})
}
});
}

页面初次加载，获取当前gps位置周围的单车数据

onReady: function () {
var _this=this
wx.getLocation({
type: 'gcj02',
success: function (res) {
latitude1 = res.latitude
longitude1 = res.longitude
mapcenter = [latitude1, longitude1]
getbike()
_this.setData({
wd: latitude1,
jd: longitude1,
})
}
})
},

拖动地图时，先获取地图中心坐标，然后再调用getbike。

//获取中心点
bindregionchange: function (e) {
this.mapCtx.getCenterLocation({
success: function (res) {
mapcenter = [res.latitude, res.longitude]
}
})
console.log(mapcenter)
getbike()
}

,

点击控件，根据控件id不同进行处理

//控件
bindcontroltap: function (e){
console.log(e.controlId)
var id=e.controlId
if (id==2){
this.mapCtx.moveToLocation()
mapcenter = [latitude1, longitude1]
getbike()
}
else if(id==1){
wx.navigateTo({
url: '../free30/free30'
})
}
else if (id==3) {
wx.navigateTo({
url: '../log/log'
})
}
}
})

效果图如下：

微信小程序仿摩拜单车相关推荐

android 仿ofo页面,微信小程序_模仿共享单车ofo源代码
[实例简介] 功能:登陆定位及地图查看轮播图广告我的行程及列表我的钱包及查看交易明细 [实例截图] [核心代码] 模仿共享单车ofo(微信小程序源代码) └── 模仿共享单车ofo(微信小程序 ...
Android百度地图实例详解之仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录，导航等)
Android百度地图实例详解之仿摩拜单车APP(包括附近车辆.规划路径.行驶距离.行驶轨迹记录,导航等) 标签: android百度地图行驶轨迹记录共享单车行驶距离和时间 2017-03-08 20 ...
仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录，导航等)
本文是由奇虎360公司高磊关于使用百度地图仿摩拜单车APP,原文地址:http://blog.csdn.net/gaolei1201/article/details/60876811 最近共享单车很火 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
Java微信运动步数排序设计_微信小程序仿微信运动步数排行(交互)
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: {{item.name}} {{item.steps}} wxss: ...
android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...
微信小程序仿网易云音乐（使用云开发，提供源码）
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
微信小程序-仿朋友圈点赞评论操作面板
目录微信小程序-仿朋友圈点赞评论操作面板一.效果二.实现 1.wxml实现 2.js实现 3.wxss实现三.记录 1.dataset使用微信小程序-仿朋友圈点赞评论操作面板一.效果二. ...
到家服务公司php源码,微信小程序-仿五洲到家商城源码
微信小程序-仿五洲到家商城源码微信小程序仿五洲到家商城源码是一款精仿五洲到家app界面的小程序源码,适用于各类小程序商城系统,功能及模块均值得借鉴! 对应功能模块 > * 首页(定位成功情况且 ...

微信小程序仿摩拜单车

微信小程序仿摩拜单车相关推荐

最新文章

热门文章