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

Posted 2022-01-15 编程小石头

老规矩，先看效果图

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

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

第一步，获取经纬度

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

腾讯地图经纬度查询：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": "导航需要" 
    
  ,

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