小程序之map组件(从我的位置到指定位置导航)

需求

不显示 map 组件，点击对应按钮，从而实现导航

所用到的组件 + API

1. map组件

2. wx.getLocation(Object object) – 获取当前的地理位置、速度。

3. wx.openLocation(Object object) – 使用微信内置地图查看位置。

​ map地址

​ API地址

app.json 配置

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
},

.xml

<view class="shop_info">
    <view class="info_item  bgWhite" bind:tap="goShowMap">
      <i class="iconfont address"></i>
      <text>xxxxx地址</text>
    </view>
</view>


<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}"
  bindmarkertap="markertap" bindregionchange="regionchange" show-location style="display: none;">
</map>

.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    //设置标记点
    markers: [
      {
        latitude: 23.1066805,
        longitude: 113.3245904,
        name: '广州塔',
        address: '广州市海珠区阅江西路222号',
      }
    ],
    latitude: '',
    longitude: '',
  },
  onLoad: function () {
    let _self = this;
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        _self.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      }
    })
  },

  //查看地图
  goShowMap: function (e) {
    this.openMap()
  },

  openMap: function () {
    let that = this;

    wx.openLocation({
      latitude: this.data.markers[0].latitude,
      longitude: this.data.markers[0].longitude,
      name: this.data.markers[0].name,
      address: this.data.markers[0].address,
    })

  },
})

.wxss

.shop_info {
    .info_item {
        display: flex;
        align-items: center;
        padding: 32rpx 30rpx;
        border-bottom: solid 1px #f3f0f3;
        i {
            font-size: 38rpx;
            font-weight: 600;   
        }
        text {
            flex: 1;
            height: 100%;
            margin-left: 12rpx;
            font-size: 30rpx;
        }
        &:first-child {
            border-top: solid 1px #f3f0f3;
        }
    }
}