本小程序仿摩拜单车的地图显示和拖动部分,单车数据采用周边厕所模拟。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],
-
-
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置,可能很多用户都不知道
阅读:8177|2022-11-06
|
请发表评论