微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
效果图：
实现代码:
!-- text{{markers[id].placeName}}/text --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/blockjs
// map.jsvar 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("拨打电话失败！") } }) }})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;}
