网站主机和服务器的区别,wordpress中文安装竟然是英文的,自学移动端网站开发,北京做手机网站建设感谢阅读#xff0c;初学小白#xff0c;有错指正。
一、实现功能#xff1a;
在地图上添加标记点后#xff0c;标记点是可以携带以下基础信息的#xff0c;如标题、id、经纬度等。但是对于开发来说#xff0c;这些信息还不足够#xff0c;而且还要做到点击标记点时初学小白有错指正。
一、实现功能
在地图上添加标记点后标记点是可以携带以下基础信息的如标题、id、经纬度等。但是对于开发来说这些信息还不足够而且还要做到点击标记点时能够显示出相关所有信息。这篇笔记就是分享点击一个已有图标如何能够显示出相关信息的功能。如何添加标记参考上一篇文章《微信小程序2-地图显示和地图标记》。
二、添加一个动态弹框用于显示标记点信息
修改index.wxml
在map元素的同级容器下添加如下view
view animation{{animationData}} classinfobox 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}} classinfobox wx:if{{showInfoBoxStatus}}text{{infoBoxTitle}}/text
/view 四、展示下最终效果
