微信小程序仿摩拜单车
本小程序仿摩拜单车的地图显示和拖动部分,单车数据采用周边厕所模拟。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'
-
})
-
}
-
}
-
-
})
效果图如下: