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

金鞍玉勒寻芳客,未信我庐别有春。这篇文章主要讲述小程序里显示店铺地址,可在地图上查看,可点击导航到店铺相关的知识,希望能为你提供帮助。
老规矩,先看效果图 可以在地图上显示店铺位置,地址,联系方式

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

文章图片

点击位置可以调起导航功能
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺

文章图片

第一步,获取经纬度 因为小程序内置的是腾讯地图,所以你需要到腾讯地图上查询经纬度。
首先,你要明确一个事情,任何位置都有它的 经纬度 ,所以你首先要获取到你想定位位置的经纬度。
腾讯地图经纬度查询:https://lbs.qq.com/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": "导航需要" ,

【小程序里显示店铺地址,可在地图上查看,可点击导航到店铺】到这里我们就可以很方便的让用户找到我们了。

    推荐阅读