?感謝閱讀，初學(xué)小白，有錯(cuò)指正。

一、實(shí)現(xiàn)功能：

在地圖上添加標(biāo)記點(diǎn)后，標(biāo)記點(diǎn)是可以攜帶以下基礎(chǔ)信息的，如標(biāo)題、id、經(jīng)緯度等。但是對(duì)于開(kāi)發(fā)來(lái)說(shuō)，這些信息還不足夠，而且還要做到點(diǎn)擊標(biāo)記點(diǎn)時(shí)，能夠顯示出相關(guān)所有信息。這篇筆記就是分享點(diǎn)擊一個(gè)已有圖標(biāo)，如何能夠顯示出相關(guān)信息的功能。（如何添加標(biāo)記，參考上一篇文章《微信小程序2-地圖顯示和地圖標(biāo)記》）。

二、添加一個(gè)動(dòng)態(tài)彈框，用于顯示標(biāo)記點(diǎn)信息

修改index.wxml

在map元素的同級(jí)容器下添加如下view

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

其中animationData和showInfoBoxStatus是定義在index.js文件中data的變量，用于動(dòng)態(tài)控制彈框是否顯示。

修改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: {   // 頁(yè)面內(nèi)全局變量，可通過(guò)this.data.markers使用，index.wxml中可通過(guò){{markers}}使用markers: [],animationData: '',showInfoBoxStatus: false,},

添加點(diǎn)擊標(biāo)記點(diǎn)處理標(biāo)記信息，其中markertap: function (e)函數(shù)是標(biāo)記點(diǎn)點(diǎn)擊的回調(diào)函數(shù)，可以在《微信小程序2-地圖顯示和地圖標(biāo)記》查看設(shè)置方式

 markertap: function (e) {// 處理點(diǎn)擊標(biāo)記點(diǎn)事件，可以在這里展示照片和文字信息console.log(e);if (this.data.showInfoBoxStatus == false) {this.showInfoBox()}// e['markerId']
},// 顯示對(duì)話框
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)
},

這樣只要點(diǎn)擊標(biāo)記圖標(biāo)，即可顯示該隱藏框。上面代碼中有一句注釋掉的e['markerId']。很重要，“如何將用戶(hù)點(diǎn)擊的標(biāo)記和代碼中的圖標(biāo)信息匹配”問(wèn)題中，起到很關(guān)鍵的作用。

既然是隱藏框，能觸發(fā)顯示，就應(yīng)該能觸發(fā)隱藏。

下面寫(xiě)觸發(fā)隱藏的代碼

還是index.js

  regionchange: function (e) {// 處理地圖視野變化事件console.log(e);if (this.data.showInfoBoxStatus == true) {this.hideInfoBox()}},// 隱藏對(duì)話框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)是用戶(hù)拖動(dòng)地圖視野的回調(diào)函數(shù)，?可以在《微信小程序2-地圖顯示和地圖標(biāo)記》查看設(shè)置方式。這樣只要用戶(hù)拖動(dòng)地圖視野，就會(huì)觸發(fā)隱藏動(dòng)作。

三、在動(dòng)態(tài)彈框中顯示對(duì)應(yīng)標(biāo)記信息

前面提到markertap: function (e)函數(shù)中有一個(gè)參數(shù)e，里面包含了所有標(biāo)記點(diǎn)的基本信息，其中e['markerId']則是一個(gè)關(guān)鍵信息，為標(biāo)記點(diǎn)的id，只要能拿到這個(gè)編號(hào)，在代碼中就可以知道用戶(hù)點(diǎn)擊的是哪個(gè)圖標(biāo)。所有圖標(biāo)的標(biāo)記信息我們可以創(chuàng)建一個(gè)變量tagInfo[]來(lái)存儲(chǔ)。里面包含圖標(biāo)的id，這樣當(dāng)用戶(hù)點(diǎn)擊標(biāo)記點(diǎn)，使用一個(gè)循環(huán)比較，就可以得到標(biāo)記點(diǎn)的自定義信息，想寫(xiě)什么信息，就可以那什么信息寫(xiě)進(jìn)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: {    // 頁(yè)面內(nèi)全局變量，可通過(guò)this.data.markers使用，index.wxml中可通過(guò){{markers}}使用markers: [],animationData: '',showInfoBoxStatus: false,infoBoxTitle: '',},markertap: function (e) {// 處理點(diǎn)擊標(biāo)記點(diǎn)事件，可以在這里展示照片和文字信息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('沒(méi)找到標(biāo)記點(diǎn)信息');return}// 修改infoBox顯示信息this.setData({infoBoxTitle: tagInfo[i].title,});},// 在最外面定義一個(gè)數(shù)組變量，存儲(chǔ)標(biāo)記點(diǎn)信息
var tagInfo = [{'id': 0,'title': 'eee',},{'id': 1,'title': 'ddd',}]

index.wxml修改

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

?四、展示下最終效果