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

Posted 2022-12-21 算法与编程之美

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序地图插入图标后怎么实现点击图标弹出窗口相关的知识，希望对你有一定的参考价值。

1问题描述

本次博客的要解决的问题是：小程序地图插入图标后怎么实现点击图标弹出窗口

如图：

2算法描述点击标记点获取数据

想要在地图等页面上显示弹窗，是使用的是marke的方法，点击标记点获取数据

先在wxml里写好布局文件

<view class="detail-card-body1" hoverClass="hover"

bindtap="toCase1" data-id="ingma.id">

<view class="detail-card-title1" >ingma.nameview>

距你dis米

view>

点击查看详情

view>

<view class="detail-card-des1">detailCardInfo.cardDescview>

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

以上是关于小程序地图插入图标后怎么实现点击图标弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章

百度地图标注小图标如何设置

宠物寄养小程序实战教程02

请问怎样使程序在最小化后图标放在任务栏的托盘上？

win10任务栏图标大小设置了不生效？

用mfc怎么打开excel表格

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

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