微信小程序地图 多点定位 真机显示弹框

wxml页面

<map id="map" longitude="" latitude=""

bindmarkertap="showDialogBtn"

markers="{{markers}}" include-points="{{markers}}" style="position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;"></map>

<!--弹窗-->
<cover-view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></cover-view>

<cover-view class="modal-dialog" wx:if="{{showModal}}">

<cover-view class="modal-content">

<cover-view class="table">

<cover-view class="tr">

<cover-view class="th">用户</cover-view>

<cover-view class="th">维护员</cover-view>

<cover-view class="th">管理员</cover-view>

</cover-view>

<cover-view class="tr">

<cover-view class='td'>1</cover-view>

<cover-view class='td'>1</cover-view>

<cover-view class='td'>1</cover-view>

</cover-view>

</cover-view>

</cover-view>

</cover-view>

include-points可定位到多点，cover-view可以解决真机上弹框不显示问题

wxss页面

/*弹窗页面设置*/

 

.modal-mask {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.5;

overflow: hidden;

z-index: 9000;

color: #fff;

}

.modal-dialog {

width: 90%;

overflow: hidden;

position: fixed;

top: 50%;

left: 0;

z-index: 9999;

background: #fff;

margin: -180rpx 55rpx;

border-radius: 36rpx;

}

.modal-title {

padding-left: 30rpx;

padding-top: 15rpx;

font-size: 26rpx;

color: #030303;

float: left;

}

.modal-content {

padding: 15rpx 25rpx;

}

.btn{

margin-left: 2px;

}

.table {

border-right: 0;

border-bottom: 0;

width: 98%;

}

.tr {

width: 100%;

display: flex;

justify-content: space-between;

}

.th, .td {

min-height: 40rpx;

padding-top:8rpx ;

border: 1px solid #dadada;

text-align: center;

width: 100%;

font-size: 30rpx;

}

.th {

font-weight: 300;

background-color: #dadada;

}

.tel-text{

font-size: 24rpx;

}

.time-text{

font-size: 26rpx;

}

.td-text,.gas-text{

font-size: 20rpx;

display: flex;

flex-direction: row;

justify-content: center;

}

.txt{

border-width:1px;

box-shadow: 2px 2px 6px;

border-radius:5px;

border-color:#636363;

background:#C1FFC1;

}

js页面

// pages/demo2/demo2.js

Page({

 

/**

* 页面的初始数据

*/

data: {

markers: [{

iconPath: '/images/icon-location.png',

id: 1,

latitude: 39.970830,

longitude: 116.410440,

width: 30,

height: 30

},

{

iconPath: '/images/icon-location.png',

id: 2,

latitude: 39.970850,

longitude: 116.410840,

width: 30,

height: 30

},

{

iconPath: '/images/icon-location.png',

id: 3,

latitude: 39.971850,

longitude: 116.411840,

width: 30,

height: 30

}]

},

showDialogBtn:function(e){

this.setData({

showModal: true,

})

console.log(e.markers);

},

hideModal: function () { //隐藏模态对话框

this.setData({

showModal: false

});

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

console.log("----" + this.data.markers);

},

})

这只是一个静态的弹框的小demo ，若要实现动态页面可结合自己的实际情况作出相关修改