1问题描述
本次博客的要解决的问题是：小程序地图插入图标后 怎么实现点击图标弹出窗口
如图：
2算法描述点击标记点获取数据
想要在地图等页面上显示弹窗，是使用的是marke的方法，点击标记点获取数据
先在wxml里写好布局文件
<view class="detail-card-body1" hoverClass="hover" bindtap="toCase1" data-id="{{ingma.id}}"> <view class="detail-card-title1" >{{ingma.name}}view> <view class="detail-card-distance" > 距你{{dis}}米 view> <view class="detail-card-distance "> <view class="detail-card-audio-second "> 点击查看详情 view> view> <view class="detail-card-des1">{{detailCardInfo.cardDesc}}view> view> |
点击事件用bindtap，toCase1是需要在.js文件里写出的点击事件方法；bindtap="toCase1"是布局文件中删除按钮与.js文件里的删除方法绑定。下面看下.js里面跳转方法，弹窗是在点击图标时候弹出的，所以写在点击事件里面
Page({ data:{ latitude: 32.739668,//默认定位纬度 longitude: 103.834568, showDialog:false, mapId:"myMap",//wxml中的map的Id值 flag:true, currentItemId:0, isSelectedBuildType: 0, islocation: true, ingma:[], poiT:[ { name:'游览点', fid:'1', scale:'15', latitude: "32.739668", longitude: "103.834568", markers:[] } ,{ name:'科普点', fid:'2', scale:'14.5', latitude: "32.722861", longitude: "103.832321", markers:[] },{ name:'售票处', fid:'3', scale:'15.9', latitude: "32.748993", longitude: "103.822896", markers:[] },{ name: '卫生间', fid:'4', scale:'16', latitude: "32.742095", longitude: "103.834076", markers:[] } ], onReady: function (e) { // 使用 wx.createMapContext 获取 map 上下文 this.mapCtx = wx.createMapContext('myMap') }, onLoad: function() { var that = this; // 获取当前定位的经纬度信息 wx.showLoading({ title:"定位中", mask:true }) wx.getLocation({ type: 'gcj02', //返回可以用于wx.openLocation的经纬度 altitude:true,//高精度定位 //定位成功，更新定位结果 success: function (res) { var latitude = res.latitude; var longitude = res.longitude; that.setData({ centerX: longitude, centerY: latitude, }); }, //定位失败回调 fail:function(){ wx.showToast({ title:"定位失败", icon:"none" }) }, complete:function(){ //隐藏定位中信息进度 wx.hideLoading() } }) }, //点击其他位置关闭弹窗 close(){ this.setData({ flag:true, locat:false, }) }, //加载 onLoad:function(e){ //添加markers var that = this wx.request({ url: 'http://36.133.200.169:8088/public/spg/poi/list', data: { }, header: {'content-type':'application/json'}, method: 'POST', dataType:'json', responseType: 'text', success: (result) => { for (var i = 0; i < result.data.data.length; i++) { var poiType = result.data.data[i].poiType if ( poiType == '游览点'){ let mark = "poiT[0].markers[" + i + "]"; that.setData({ [mark]: { id: i, iconPath: "/image/zoo.png", latitude: result.data.data[i].latitude, longitude: result.data.data[i].longitude, width: 50, height: 50, name:result.data.data[i].name, poiType:result.data.data[i].poiType, label:{ content:result.data.data[i].name, fontsize:15, borderRadius:10, bgColor:'#fff', anchorX:-35, anchorY:3, padding:5 } }, } )} else if ( poiType == '科普点'){ let mark = "poiT[1].markers[" + i + "]"; that.setData({ [mark]: { id: i, iconPath: "/image/kepu.png", latitude: result.data.data[i].latitude, longitude: result.data.data[i].longitude, width: 50, height: 50, name:result.data.data[i].name, poiType:result.data.data[i].poiType, label:{ content:result.data.data[i].name, fontsize:15, borderRadius:10, bgColor:'#fff', anchorX:-35, anchorY:3, padding:5 } }, } )} else if ( poiType == '售票处'){ let mark = "poiT[2].markers[" + i + "]"; that.setData({ [mark]: { id: i, iconPath: "/image/yld.png", latitude: result.data.data[i].latitude, longitude: result.data.data[i].longitude, width: 50, height: 50, name:result.data.data[i].name, poiType:result.data.data[i].poiType, label:{ content:result.data.data[i].name, fontsize:15, borderRadius:10, bgColor:'#fff', anchorX:-35, anchorY:3, padding:5 } }, } )} else{ let mark = "poiT[3].markers[" + i + "]"; that.setData({ [mark]: { id: i, iconPath: "/image/cs.png", latitude: result.data.data[i].latitude, longitude: result.data.data[i].longitude, width: 50, height: 50, name:result.data.data[i].name, poiType:result.data.data[i].poiType, label:{ content:result.data.data[i].name, fontsize:15, borderRadius:10, bgColor:'#fff', anchorX:-35, anchorY:3, padding:5 } }, } )} } },
}) }, //点击标记点获取数据 markertap(res){ let self = this console.log(res) var mark=res.currentTarget.dataset; console.log(mark) var len = Object.keys(mark).length//获取JSON长度; var markerId=res.markerId; console.log(markerId) var currentItemId= this.data.currentItemId console.log(currentItemId) var result = this.data.poiT[currentItemId].markers; console.log(result) var id=markerId wx.getLocation({ type: 'gcj02', success: (e) => { var lat0 = e.latitude var lng0 = e.longitude var lat = result[markerId].latitude var lgt =result[markerId].longitude var dis =Math.floor(comm.GetDistance(lng0,lat0,lgt,lat)); console.log('距你'+dis+'米') // console.log(result[markerId]) self.setData({ ingma:result[markerId], dis:dis, }) this.setData({ flag:false, locat:true }) },
})
}, toggleDialog: function () { this.setData({ showDialog: false, }) }, //跳转 toCase1(e){ console.log(e.currentTarget.dataset.id) const id=e.currentTarget.dataset.id wx.navigateTo({ url: '/packageA/page/case1/case1?id='+id, }) }, }) |
3 结语
本次解决了小程序地图插入图标后 怎么实现点击图标弹出窗口的问题。这里使用到的是小程序自定义map组件标记点marker，这次只是介绍了marker的一个用法，如果后续有需要，会再出一期关于小程序地图的学习与使用。
