金鞍玉勒寻芳客,未信我庐别有春。这篇文章主要讲述小程序里显示店铺地址,可在地图上查看,可点击导航到店铺相关的知识,希望能为你提供帮助。
老规矩,先看效果图 可以在地图上显示店铺位置,地址,联系方式
文章图片
点击位置可以调起导航功能
文章图片
第一步,获取经纬度 因为小程序内置的是腾讯地图,所以你需要到腾讯地图上查询经纬度。
首先,你要明确一个事情,任何位置都有它的 经纬度 ,所以你首先要获取到你想定位位置的经纬度。
腾讯地图经纬度查询: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": "导航需要" ,
【小程序里显示店铺地址,可在地图上查看,可点击导航到店铺】到这里我们就可以很方便的让用户找到我们了。
推荐阅读
- 面试官: Flink双流JOIN了解吗? 简单说说其实现原理
- Tomcat 部署及优化
- 附解决方案,小程序用户昵称突然变成了“微信用户”,而且头像也显示不了()
- datstage处理文本文件中存在多余换行符的数据
- 测试人如何高效地设计自动化测试框架()
- 10.FastAPI响应体
- #yyds干活盘点# 2.1 HTML5 Canvas
- 自定义biao
- #yyds干货盘点#Redis集群原理专题分析一下相关的Redis服务分片技术和Hash Tag