项目实战-点餐小程序-18 首页-餐厅地址

2021-08-05 09:33:37 阅读：242 来源： 互联网

标签：console log 18 首页 res marker 点餐 restaurantInfo wx

一、实现思路

编写餐厅地址的页面 restaurantInfo.wxml　　
美化餐厅地址的页面显示 restaurantInfo.wxss
编写页面的初始数据 restaurantInfo.js
编写点击标记点触发导航功能 restaurantInfo.js
1. wx.getLocation 获取当前位置的应用
2. wx.openLocation 地图搜索目的地的应用
3. wx.openSetting 调起客户端小程序设置界面　　
设置权限 app.json（）
编写拨打联系电话的功能（wx.makePhoneCall的应用）
编写复制微信号的功能（wx.setClipboardData的应用）

二、代码实现

1.restaurantInfo.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.restaurantInfo.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.restaurantInfo.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   //点击标记点触发导航功能（自定义）
37   clickMarker(e){
38     console.log("用户点击了标记点",e.target.dataset.marker);
39     let marker = e.target.dataset.marker
40     //获取用户当前位置
41     wx.getLocation({
42       type:"gcj02", //gcj02 返回可用于 wx.openLocation 的坐标
43     }).then(res=>{
44       console.log("用户允许获取当前位置",res);
45       //地图搜索目的地
46       wx.openLocation({
47         latitude: marker.latitude,
48         longitude: marker.longitude,
49         scale:16,
50         name:marker.name,
51         address:marker.address
52       })
53     }).catch(err=>{
54       console.log("用户拒绝获取当前位置",err);
55       wx.showModal({
56         title:"授权当前位置",
57         content:"需要授权位置信息才可以导航，点击去设置开启位置权限",
58         confirmText:"去设置",
59         success(res){
60           console.log("弹窗点击",res);
61           if(res.confirm){
62             wx.openSetting()  //调起客户端小程序设置界面
63           }
64         } 
65       })
66     })
67   },
68   //拨打联系电话
69   callPhone(e){
70     console.log("获取的联系电话",e);
71     wx.makePhoneCall({  //调起拨打电话弹窗
72       phoneNumber:e.currentTarget.dataset.phonenumber
73     })
74   },
75   //复制微信号
76   copyWechat(e){
77     console.log("获取的微信号",e);
78     wx.setClipboardData({   //设置系统剪贴板的内容
79       data: e.currentTarget.dataset.wechatnumber,
80     }).then(res=>{
81       console.log("微信号复制成功",res);
82       wx.showToast({
83         title: '微信号复制成功',
84         icon:"none"
85       })
86     }).catch(err=>{
87       console.log("微信号复制失败",err);
88     })
89   }
90  
91 })

4.app.json

app.json新增permission的设置。

1   "permission":{
2     "scope.userLocation": {
3       "desc": "导航需要"
4     }
5   },

三、效果展示

标签：console,log,18,首页,res,marker,点餐,restaurantInfo,wx
来源： https://www.cnblogs.com/AnnLing/p/15101775.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

项目实战-点餐小程序-18 首页-餐厅地址