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

微信扫描下方二维码 观看效果-动物觅踪

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

一、实现功能：

在地图上添加标记点后，标记点是可以携带以下基础信息的，如标题、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>

 四、展示下最终效果