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

太过爱你忘了你带给我的痛 2021-09-27 10:14 413阅读 0赞

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>

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 ，若要实现动态页面可结合自己的实际情况作出相关修改

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关微信小程序——真机调试步骤

相关微信小程序地图

相关微信小程序如何实现点击后地图选择定位位置

相关微信小程序日历弹框组件

相关微信小程序自定义弹框

相关微信小程序地图点聚合

相关微信小程序自定义Modal弹出框

相关微信小程序实现消息框弹出动画

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

相关微信小程序开发—(五)弹出框