当前位置：首页 > news >正文

微信小程序3-显标记信息和弹框

news 来源：原创 2024/12/9 15:39:41

感谢阅读，初学小白，有错指正。

一、实现功能：

在地图上添加标记点后，标记点是可以携带以下基础信息的，如标题、id、经纬度等。但是对于开发来说，这些信息还不足够，而且还要做到点击标记点时，能够显示出相关所有信息。这篇笔记就是分享点击一个已有图标，如何能够显示出相关信息的功能。（如何添加标记，参考上一篇文章《微信小程序2-地图显示和地图标记》）。

二、添加一个动态弹框，用于显示标记点信息

修改index.wxml

在map元素的同级容器下添加如下view

<view animation="{{animationData}}" class="infobox" wx:if="{{showInfoBoxStatus}}"><text>要显示的信息</text>
</view>

其中animationData和showInfoBoxStatus是定义在index.js文件中data的变量，用于动态控制弹框是否显示。

修改index.wxss

.infobox {position: fixed;height: 40%;width: 100%;bottom: 0;left: 0;background: rgba(219, 241, 243, 0.863);padding-top: 20rpx;position: absolute;
}

修改index.js

添加data变量

  data: {   // 页面内全局变量，可通过this.data.markers使用，index.wxml中可通过{{markers}}使用markers: [],animationData: '',showInfoBoxStatus: false,},

添加点击标记点处理标记信息，其中markertap: function (e)函数是标记点点击的回调函数，可以在《微信小程序2-地图显示和地图标记》查看设置方式

 markertap: function (e) {// 处理点击标记点事件，可以在这里展示照片和文字信息console.log(e);if (this.data.showInfoBoxStatus == false) {this.showInfoBox()}// e['markerId']
},// 显示对话框
showInfoBox: function () {// 显示遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),showInfoBoxStatus: true})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export()})}.bind(this), 200)
},

这样只要点击标记图标，即可显示该隐藏框。上面代码中有一句注释掉的e['markerId']。很重要，“如何将用户点击的标记和代码中的图标信息匹配”问题中，起到很关键的作用。

既然是隐藏框，能触发显示，就应该能触发隐藏。

下面写触发隐藏的代码

还是index.js

  regionchange: function (e) {// 处理地图视野变化事件console.log(e);if (this.data.showInfoBoxStatus == true) {this.hideInfoBox()}},// 隐藏对话框hideInfoBox: function () {// 隐藏遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export(),showInfoBoxStatus: false})}.bind(this), 200)},
});

其中regionchange: function (e)是用户拖动地图视野的回调函数，可以在《微信小程序2-地图显示和地图标记》查看设置方式。这样只要用户拖动地图视野，就会触发隐藏动作。

三、在动态弹框中显示对应标记信息

前面提到markertap: function (e)函数中有一个参数e，里面包含了所有标记点的基本信息，其中e['markerId']则是一个关键信息，为标记点的id，只要能拿到这个编号，在代码中就可以知道用户点击的是哪个图标。所有图标的标记信息我们可以创建一个变量tagInfo[]来存储。里面包含图标的id，这样当用户点击标记点，使用一个循环比较，就可以得到标记点的自定义信息，想写什么信息，就可以那什么信息写进tagInfo[]中。

    var i = 0;while (i < tagInfo.length) {console.log(e['markerId'], tagInfo[i].id);if (e['markerId'] == tagInfo[i].id) {break}i++;}

下面把得到的信息如何在隐藏框中显示的代码贴一下

index.js修改

  data: {    // 页面内全局变量，可通过this.data.markers使用，index.wxml中可通过{{markers}}使用markers: [],animationData: '',showInfoBoxStatus: false,infoBoxTitle: '',},markertap: function (e) {// 处理点击标记点事件，可以在这里展示照片和文字信息console.log(e);if (this.data.showInfoBoxStatus == false) {this.showInfoBox()}var i = 0;while (i < tagInfo.length) {console.log(e['markerId'], tagInfo[i].id);if (e['markerId'] == tagInfo[i].id) {break}i++;}if (i >= tagInfo.length){console.log('没找到标记点信息');return}// 修改infoBox显示信息this.setData({infoBoxTitle: tagInfo[i].title,});},// 在最外面定义一个数组变量，存储标记点信息
var tagInfo = [{'id': 0,'title': 'eee',},{'id': 1,'title': 'ddd',}]

index.wxml修改


<view animation="{{animationData}}" class="infobox" wx:if="{{showInfoBoxStatus}}"><text>{{infoBoxTitle}}</text>
</view>

四、展示下最终效果

相关文章：