微信小程序开发交流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></block>
js
// 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 = thisconsole.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 = animationanimation.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 = animationanimation.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;}
