感谢阅读，初学小白，有错指正。
一、实现功能：
在地图上添加标记点后，标记点是可以携带以下基础信息的，如标题、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 = animation
animation.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 = animation
animation.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>四、展示下最终效果
