小程序地图插入图标后 怎么实现点击图标弹出窗口
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的一个用法，如果后续有需要，会再出一期关于小程序地图的学习与使用。