微信小程式 滑動顯示地點資訊 map

2021-09-08 14:13:10 字數 1965 閱讀 3584

演示效果如下:

資源如下

marker,png

index.wxml

1

<

view

class

="map-container"

>

2<

map

id="map"

longitude

="}"

latitude

="}"

scale

="18"

bindcontroltap

="controltap"

markers

="}"

controls

="}"

bindmarkertap

="markertap"

bindregionchange

="regionchange"

show-location

>

3<

cover-view

>4}

5cover-view

>

6map

>

7view

>

index.wxss

1

.map-container 89

map

1314

cover-image

1819

cover-view

index.js

1let qqmapwx = require('qqmap-wx-jssdk.min'

);2

let qqmapsdk;3

4page(,

1314/**

15* 生命週期函式--監聽頁面載入

16*/

17onload(options) );

3637/**

38* 呼叫內部獲取位置,預設為wsg84,精確為gcj02

39*/

40wx.getlocation();48}

49})

50},

5152/**

53* 生命週期函式--監聽頁面初次渲染完成

54*/

55 onready: function

() ,

5859

60/**61

* 獲取中間點的經緯度,並mark出來

62*/

63getlnglat() ]

77})

78page.getpoilist(res.longitude, res.latitude)79}

80})

81},

8283/**

84* 視野發生變化時觸發:見頁面bindregionchange事件

85*/

86regionchange(e) ,

8990

91/**92

* 詳情見官方api配置:

93*/

94getpoilist(longitude, latitude) ,

101 get_poi: 1,

102 poi_options: 'policy=2;radius=3000;page_size=2;page_index=1',

103 success: function

(res) );

110},

111 fail: function

(res) ,

114 complete: function

(res)

117});

118}

119 })

微信小程式 多地點標識 map

演示如下 45 標示點移動觸發 46 47regionchange e 5051 52 點選標識點觸發 53 54markertap e 5758 59 control控制項點選時間 60 61controltap e 6566 67 68 獲取醫院標識 69 70gethospitalmarker...

微信小程式 滑動刪除

vant ui 框架位址 usingcomponents 2 vant裡面的滑動的操作方法直接使用 left width img 內容 button 的大盒子 wrk img img 渲染的 wrk image src wrk name wrk top 標題 name 渲染的標題 爆款背心 wrk ...

微信小程式開發 滑動操作

在實際應用中,當某種手勢被觸發後,在使用者沒有放開滑鼠或手指前,會一直識別為該手勢。比如當使用者觸發左滑手勢後,這時再向下滑動,仍要按照左滑手勢來處理。可以定義乙個標記來記錄第一次識別到的手勢,如果已識別出手勢,後續的滑動操作就可以忽略,直到使用者放開滑鼠或手指。放開滑鼠或手指操作可以通過繫結han...