一、功能需求
- 显示门店的信息（地图定位信息、门店名称、门店地址、联系电话、微信号）
- 点击地图定位点/气泡，自动调取手机中的地图软件，进入导航
二、代码实现
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 })
三、效果展示
