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

本文主要是介绍项目实战-点餐小程序-18 首页-餐厅地址，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、实现思路

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

三、效果展示

这篇关于项目实战-点餐小程序-18 首页-餐厅地址的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！