前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序里显示店铺地址,可在地图上查看,可点击导航到店铺

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

作者头像
编程小石头
发布2021-03-15 16:52:36
1.2K0
发布2021-03-15 16:52:36
举报

老规矩,先看效果图

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

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

第一步,获取经纬度

因为小程序内置的是腾讯地图,所以你需要到腾讯地图上查询经纬度。 首先,你要明确一个事情,任何位置都有它的 经纬度 ,所以你首先要获取到你想定位位置的经纬度。

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

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

第二步,设置wxml页面

我先把代码截个图出来。

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

代码语言:javascript
复制
<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代码

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

然后把代码给到大家

代码语言:javascript
复制
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里设置

代码语言:javascript
复制
  "permission": {
    "scope.userLocation": {
      "desc": "导航需要" 
    }
  },

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-03-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程小石头 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 老规矩,先看效果图
    • 可以在地图上显示店铺位置,地址,联系方式
      • 点击位置可以调起导航功能
      • 第一步,获取经纬度
      • 第二步,设置wxml页面
      • 第三步,编写js代码
      • 第四步,设置定位权限
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档