功能需要：在微信小程序地图上设置位置标记点，触发标记点从下面往上滑动显示当前标记点的详情介绍。
1、view代码
<block wx:if='{{isshow}}'>
<map id="map" longitude="114.048410" latitude="22.648760" scale="8" include-points="{{markers}}" markers="{{markers}}" bindmarkertap="showModal" data-id="{{markers}}" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;">
<cover-view class='index_bt1'>
<cover-image class='xiaoer' bindtap="login" src="/images/mk.png" />
</cover-view>
<cover-view class='index_shuaxin'>
<cover-image class='shuaxin' src="/images/mk.png" />
</cover-view>
<!--屏幕背景变暗的背景 -->
<cover-view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></cover-view>
<!--弹出框 -->
<cover-view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<cover-view class='placeBox'>
<cover-view class='placeViewLt'>
<cover-view class='viewTitle'>{{myall.placeName}}</cover-view>
<cover-view class='viewDis'>{{myall.dis}}</cover-view>
<cover-view class='viewAddr'>{{myall.adr}}</cover-view>
</cover-view>
<cover-view class='placeViewRt'>
<cover-image data-id="{{myall.id}}" bindtap="opendetail" src='/images/mk.png'></cover-image>
</cover-view>
</cover-view>
<cover-view class='viewIcon'>
<cover-image class='indexIcon' src='/images/time.png'></cover-image>
<cover-view class='timeText'>{{myall.time}}</cover-view>
<cover-image class='indexIcon1' data-id="{{myall}}" src='/images/share.png' bindtap='calling'></cover-image>
<cover-view class='timeText1' data-id="{{myall}}" bindtap='calling'>电话</cover-view>
<cover-image class='indexIcon2' src='/images/nav.png'></cover-image>
<cover-view class='timeText1'>导航</cover-view>
</cover-view>
</cover-view>
</map>
</block>
2、js代码
// map.js
var app = getApp()
var mymap = '';
var lat = '';
var long = '';
Page({
data: {
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: '#FF0000DD',
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '/images/mk.png',
position: {
left: 0,
top: 300 - 1,
width: 50,
height: 50
},
clickable: true
}]
},
//引入数据库
onLoad: function(option) {
var url = app.url + 'Api/Api/get_shop_dp&PHPSESSID=' + wx.getStorageSync('PHPSESSID')
var that = this
console.log(option)
if (option.scene) {
this.setData({
isshow: false
})
wx.navigateTo({
url: '../chat/chat?scene=' + option.scene,
})
} else {
this.setData({
isshow: true
})
}
wx.request({ //让服务器端统一下单，并返回小程序支付的参数
url: url,
data: {
openid: wx.getStorageSync('openid')
},
success: function(res) {
console.log(res);
that.setData({
markers: res.data.data
});
wx.getLocation({
type: 'wgs84',
success(mres) {
var map_lat = mres.latitude;
var map_long = mres.longitude;
var map_speed = mres.speed;
var map_accuracy = mres.accuracy;
that.setData({
lat: map_lat
});
that.setData({
long: map_long
});
}
});
}
});
},
//显示对话框
showModal: function(event) {
//console.log(event.markerId);
var i = event.markerId;
var url = app.url + 'Api/Api/get_shop_dp_detail&PHPSESSID=' + wx.getStorageSync('PHPSESSID');
var that = this;
console.log('====get_detail====')
wx.request({
url: url,
data: {
id: i,
openid: wx.getStorageSync('openid')
},
success: function(res) {
console.log(res);
that.setData({
myall: res.data.data
});
}
});
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function() {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 200)
},
//隐藏对话框
hideModal: 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(),
showModalStatus: false
})
}.bind(this), 200)
},
opendetail: function(event) {
console.log('-----跳转商品-----');
//console.log(event);
var id = event.currentTarget.dataset.id;
this.setData({
id: id
});
wx.navigateTo({
url: "/pages/detail/detail?id=" + id
}),
console.log(id);
},
calling: function(event) {
var tel = event.currentTarget.dataset.id.tel;
this.setData({
tel: tel
});
wx.makePhoneCall({
phoneNumber: tel,
success: function() {
console.log("拨打电话成功！")
},
fail: function() {
console.log("拨打电话失败！")
}
})
}
})
3、css代码
/* index/index.wxss */
page{
height: 100%;
}
.index_bt1{
width: 100rpx;
height: 100rpx;
padding-top:30rpx;
margin-left: 600rpx;
}
.xiaoer{
width: 100rpx;
height: 100rpx;
}
.index_shuaxin{
width: 60rpx;
height: 60rpx;
padding-top: 860rpx;
margin-left: 20rpx;
}
.shuaxin{
width: 60rpx;
height: 60rpx;
}
.sch{
display: block;
z-index: 999999;
height: 69rpx;
width:100%;
margin:0 auto;
padding-top: 30rpx;
}
.commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 1000;
color: #fff;
}
.commodity_attr_box {
height: 280rpx;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
padding-top: 0rpx;
}
.placeBox{
width: 100%;
height: 150rpx;
}
.placeViewLt{
display: inline-block;
width: 620rpx;
height: 140rpx;
vertical-align: middle;
}
.viewTitle{
display: block;
font-size: 38rpx;
color: #3F51B5;
margin-left: 20rpx;
padding-top: 34rpx;
}
.viewDis{
display: inline-block;
font-size: 26rpx;
color: gray;
margin-left: 20rpx;
}
.viewAddr{
display: inline-block;
font-size: 28rpx;
color: gray;
margin-left: 20rpx;
}
.placeViewRt{
display: inline-block;
width: 120rpx;
height: 120rpx;
padding-top: 6rpx;
vertical-align: middle;
}
.viewIcon{
display: block;
height: 100rpx;
width: 100%;
border-top: 1px solid #ebebeb;
padding-top: 40rpx;
}
.indexIcon{
display: inline-block;
width: 50rpx;
height: 50rpx;
margin-left: 40rpx;
vertical-align: middle;
}
.timeText{
display: inline-block;
line-height: 45rpx;
margin-left: 12rpx;
text-align: center;
width: 200rpx;
height: 45rpx;
background-color: rgb(230, 234, 255);
border-radius: 10px;
color: #3F51B5;
font-size: 24rpx;
}
.indexIcon1{
display: inline-block;
width: 50rpx;
height: 50rpx;
margin-left: 110rpx;
vertical-align: middle;
}
.indexIcon2{
display: inline-block;
width: 50rpx;
height: 50rpx;
margin-left: 20rpx;
vertical-align: middle;
}
.timeText1{
display: inline-block;
line-height: 45rpx;
margin-left: 12rpx;
width: 100rpx;
height: 45rpx;
color: #3F51B5;
font-size: 24rpx;
}
.timeText2{
display: inline-block;
line-height: 45rpx;
margin-left: 12rpx;
width: 200rpx;
height: 45rpx;
color: #3F51B5;
font-size: 24rpx;
}
.btn-area{
width: 100%;
}
.btn_no{
float:left;
width: 40%;
margin-left: 5%;
border: 0px;
}
.btn_ok{
float:left;
width: 40%;
margin-left: 10%;
margin-right: 5%;
border: 0px;
}
uniapp微信小程序鼠标点击input placeholder出现位移解决方法
uniapp开发微信小程序提示“启动组件按需注入未通过”解决方法
uniapp开发微信小程序文件不能超过2M（手把手教你实现分包）
上面是“微信小程序设置地图标记点，触发显示详细信息”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。
当前网址：https://ipkd.cn/webs_2185.html
猜你喜欢
利用html5+css3实现滚雪球效果（附代码）
3d文字360度旋转
自动打字效果(惊喜在后面)
用svg画出游泳池动画效果
做一个好玩的时钟翻牌效果
纯css制作卡通头像(随鼠标转头)
如何利用css3+js做一个下雨效果
利用css3做一个动态loading效果声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
