小程序地图插入图标后 怎么实现点击图标弹出窗口

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的一个用法，如果后续有需要，会再出一期关于小程序地图的学习与使用。