小程序
小游戏
企业微信
微信支付
扫描小程序码分享
现在有一个需求,就是地图不动,想拖拽地图上的大头针,请问小程序是否支持呢?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
小程序地图组件中的大头针(marker)是可以支持拖动的。
要在小程序地图上实现拖动大头针的效果,可以在地图组件的 markers 属性中设置 enableDragging 属性为 true。
示例代码如下:
<map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 300px;"> <cover-view class="center" bindtap="moveToCenter"> <cover-view class="location"> <cover-image src="/images/location.png"></cover-image> </cover-view> </cover-view> </map> Page({ data: { longitude: '', latitude: '', markers: [{ id: 0, longitude: '', latitude: '', iconPath: '/images/marker.png', width: 30, height: 30, enableDragging: true }], }, onLoad: function() { // 获取当前位置并设置地图中心点 wx.getLocation({ type: 'wgs84', success: res => { this.setData({ longitude: res.longitude, latitude: res.latitude, markers: [{ longitude: res.longitude, latitude: res.latitude, }] }); } }); }, markerTap: function(e) { console.log(e.markerId); }, moveToCenter: function() { this.mapCtx.moveToLocation(); }, onReady: function(e) { // 使用 wx.createMapContext 获取 map 上下文 this.mapCtx = wx.createMapContext('myMap'); } })
在上面的代码中,enableDragging 属性设置为 true 后,用户就可以通过长按大头针并拖动来改变大头针的位置。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
小程序地图组件中的大头针(marker)是可以支持拖动的。
要在小程序地图上实现拖动大头针的效果,可以在地图组件的 markers 属性中设置 enableDragging 属性为 true。
示例代码如下:
<map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 300px;"> <cover-view class="center" bindtap="moveToCenter"> <cover-view class="location"> <cover-image src="/images/location.png"></cover-image> </cover-view> </cover-view> </map> Page({ data: { longitude: '', latitude: '', markers: [{ id: 0, longitude: '', latitude: '', iconPath: '/images/marker.png', width: 30, height: 30, enableDragging: true }], }, onLoad: function() { // 获取当前位置并设置地图中心点 wx.getLocation({ type: 'wgs84', success: res => { this.setData({ longitude: res.longitude, latitude: res.latitude, markers: [{ longitude: res.longitude, latitude: res.latitude, }] }); } }); }, markerTap: function(e) { console.log(e.markerId); }, moveToCenter: function() { this.mapCtx.moveToLocation(); }, onReady: function(e) { // 使用 wx.createMapContext 获取 map 上下文 this.mapCtx = wx.createMapContext('myMap'); } })
在上面的代码中,enableDragging 属性设置为 true 后,用户就可以通过长按大头针并拖动来改变大头针的位置。