项目实战-点餐小程序-19 首页-选择门店-门店信息

转载

mb5fe1902d5617a 2021-08-06 15:42:00

一、功能需求

显示门店的信息（地图定位信息、门店名称、门店地址、联系电话、微信号）
点击地图定位点/气泡，自动调取手机中的地图软件，进入导航

二、代码实现

1.shopDetail.wxml

 1 <map longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="16" markers="{{markers}}" bindmarkertap="clickMarker" data-marker="{{markers[0]}}" bindcallouttap="clickMarker"></map>
 2 <view class="restMsg">
 3 <view class="restItem">餐厅地址：<text>{{address}}</text></view>
 4 <view  class="restItem">联系电话：
 5 <text bindtap="callPhone" class="pnoneNum" data-phoneNumber="{{phoneNumber}}">{{phoneNumber}}</text>
 6 </view>
 7 <view  class="restItem">微信号：
 8 <text bindtap="copyWechat" class="wechat" data-wechatNumber="{{wechatNumber}}">{{wechatNumber}}</text>
 9 </view>
10 </view>

2.shopDetail.wxss

 1 map{
 2   width: 100%;
 3   height: 800rpx;
 4 }
 5 /*文字显示*/
 6 .restMsg .restItem{
 7 margin: 20rpx;
 8 }
 9 .pnoneNum{
10   color:#2E64FE;
11 }
12 .wechat{
13   color: #6E6E6E;
14 }

3.shopDetail.js

  1 Page({
  2 
  3   //页面的初始数据
  4   data: {
  5     //标记点
  6     markers:[
  7       // {
  8       //   id:0,
  9       //   name:"米多餐厅",
 10       //   address:"深圳市宝安区新安街道信义领御1层302商铺",
 11       //   longitude:113.91925,
 12       //   latitude:22.576594,
 13       //   iconPath:"/images/mark.png",
 14       //   width:35,
 15       //   height:35,
 16       //   //标记点上方的气泡
 17       //   callout: {
 18       //     content: "米多餐厅",
 19       //     color:"#fff",
 20       //     fontSize: 12,
 21       //     bgColor: "#2E64FE",
 22       //     borderRadius:10,
 23       //     padding: 10,
 24       //     display: "ALWAYS",  //'BYCLICK':点击显示; 'ALWAYS':常显
 25       //     textAlign: "center"
 26       //     }
 27       // }
 28     ],
 29     //餐厅地址
 30     address:"深圳市宝安区新安街道信义领御1层102",
 31     //联系电话
 32     phoneNumber:"0755-23236567",
 33     //微信号
 34     wechatNumber:"monica_dommy"
 35   },
 36   //接收shop页面传递过来的信息
 37   onLoad(options){
 38     console.log("shop页面传递过来的信息",options.name,options.address,options.phoneNumber,options.longitude,options.latitude);
 39     this.setData({
 40       markers:[{
 41         id:0,
 42         name:options.name,

　　　　address:options.address,

 43         longitude:Number(options.longitude),
 44         latitude:Number(options.latitude),
 45         iconPath:"/images/mark.png",
 46         width:35,
 47         height:35,
 48         //标记点上方的气泡
 49         callout: {
 50           content: options.name,
 51           color:"#fff",
 52           fontSize: 12,
 53           bgColor: "#2E64FE",
 54           borderRadius:10,
 55           padding: 10,
 56           display: "ALWAYS",  //'BYCLICK':点击显示; 'ALWAYS':常显
 57           textAlign: "center"
 58           }
 59       }],
 60       address:options.address,
 61       phoneNumber:options.phoneNumber
 62     })
 63   },
 64   //点击标记点触发导航功能（自定义）
 65   clickMarker(e){
 66     console.log("用户点击了标记点",e.target.dataset.marker);
 67     let marker = e.target.dataset.marker
 68     //获取用户当前位置
 69     wx.getLocation({
 70       type:"gcj02", //gcj02 返回可用于 wx.openLocation 的坐标
 71     }).then(res=>{
 72       console.log("用户允许获取当前位置",res);
 73       //地图搜索目的地
 74       wx.openLocation({
 75         latitude: marker.latitude,
 76         longitude: marker.longitude,
 77         scale:16,
 78         name:marker.name,
 79         address:marker.address
 80       })
 81     }).catch(err=>{
 82       console.log("用户拒绝获取当前位置",err);
 83       wx.showModal({
 84         title:"授权当前位置",
 85         content:"需要授权位置信息才可以导航，点击去设置开启位置权限",
 86         confirmText:"去设置",
 87         success(res){
 88           console.log("弹窗点击",res);
 89           if(res.confirm){
 90             wx.openSetting()  //调起客户端小程序设置界面
 91           }
 92         } 
 93       })
 94     })
 95   },
 96   //拨打联系电话
 97   callPhone(e){
 98     console.log("获取的联系电话",e);
 99     wx.makePhoneCall({  //调起拨打电话弹窗
100       phoneNumber:e.currentTarget.dataset.phonenumber
101     })
102   },
103   //复制微信号
104   copyWechat(e){
105     console.log("获取的微信号",e);
106     wx.setClipboardData({   //设置系统剪贴板的内容
107       data: e.currentTarget.dataset.wechatnumber,
108     }).then(res=>{
109       console.log("微信号复制成功",res);
110       wx.showToast({
111         title: '微信号复制成功',
112         icon:"none"
113       })
114     }).catch(err=>{
115       console.log("微信号复制失败",err);
116     })
117   }
118  
119 })