网页设计图

2020-12-28

网页设计图:微信小程序地图标记点,点击标记点显示详细信息源码加效果图

微信小程序开发交流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 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;}

 

点赞 8 评论 11
公司的项目不好展示效果,我就直接用我的简历小程序示范了wxml部分specify-style是我自定义选中标签时的样式,可自行更改;block_ScrollTop多减70是因为我的导航是悬浮的,会挡住部分内容,自行修改;板块里的内容就不给了,自己随便写点东东; !-- 导航 -- view >
微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图 120483

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。



扫描二维码分享到微信

在线咨询
联系电话

400-888-8866