1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 小程序里显示店铺地址 可在地图上查看 可点击导航到店铺

小程序里显示店铺地址 可在地图上查看 可点击导航到店铺

时间:2023-07-22 19:53:59

相关推荐

小程序里显示店铺地址 可在地图上查看 可点击导航到店铺

老规矩,先看效果图

可以在地图上显示店铺位置,地址,联系方式

点击位置可以调起导航功能

第一步,获取经纬度

因为小程序内置的是腾讯地图,所以你需要到腾讯地图上查询经纬度。

首先,你要明确一个事情,任何位置都有它的 经纬度 ,所以你首先要获取到你想定位位置的经纬度。

腾讯地图经纬度查询:/tool/getpoint/index.html

如我这里的经纬度:30.353351,120.231010

要记住纬度在前,经度在后。所以我这里的纬度是30.353351,经度是120.231010

第二步,设置wxml页面

我先把代码截个图出来。

然后把代码贴出来给到大家

<map style="width:100%; height:700rpx;" longitude="{{longitude}}" latitude="{{latitude}}" scale="17"markers="{{markers}}" bindmarkertap="navRoad" data-marker="{{markers[0]}}"show-location /><view class="phone" bindtap="Call">地址:杭州市丁兰广场C座</view><view class="phone" bindtap="Call">电话:2501902696(可点击拨打)</view>

这里我们用到了小程序的map组件来显示地图,可以直接设置经纬度和标记点。

第三步,编写js代码

我先把代码截图贴出来给到大家

然后把代码给到大家

Page({data: {//店铺经纬度latitude: 30.353351,longitude: 120.231010,//标记点markers: [{id: 0,name: "编程小石头",address: "杭州市丁兰广场C座",latitude: 30.353351,longitude: 120.231010,width: 50,height: 50}]},//拨打电话Call() {wx.makePhoneCall({phoneNumber: '2501902696'})},//导航navRoad(event) {console.log(event)wx.getLocation({ //获取当前经纬度type: 'wgs84', //返回可以用于wx.openLocation的经纬度,success: function (res) {wx.openLocation({ //​使用微信内置地图查看位置。latitude: event.currentTarget.dataset.marker.latitude, //要去的纬度-地址longitude: event.currentTarget.dataset.marker.longitude, //要去的经度-地址name: event.currentTarget.dataset.marker.name,address: event.currentTarget.dataset.marker.address})}})}})

这里其实就点击导航事件比较麻烦些,其他的都还好。注释里给大家标的很清楚了。

第四步,设置定位权限

到这里其实代码已经完成了,但是我们导航的时候需要用到用户的位置权限,所以我们要在app.json里设置用户授权

如果不设置,点击导航会有如下提示。

所以我们要在app.json里设置

"permission": {"scope.userLocation": {"desc": "导航需要" }},

到这里我们就可以很方便的让用户找到我们了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。