微信小程序实现导航至目的地

本人做的导航页面相关功能和效果的代码

javascript相关

Page({
  data: {
    markers: [],
    latitude: '',  // 中心点坐标
    longitude: '',
    FIXED_LAT: 31.2304, // 1. 写死的目标点坐标, 示例：上海人民广场
    FIXED_LNG: 121.4737
  },
  onLoad: function () {
    // 如果要显示地图可以看onLoad方法里面的逻辑，如果只要一个导航功能看navigateToMap的逻辑就行
    let that = this;
    // 2. 获取我的位置
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        // 3. 构造目的地的 marker
        const markers = [{
          id: 0,
          latitude: that.data.FIXED_LAT, // 目标点的maker
          longitude: that.data.FIXED_LNG, // // 目标点的maker
          // iconPath: '/static/img/marker_fixed.png', // 自定义maker图片路径和长宽
          // width: 30,
          // height: 30
          callout: {
            content: '目标点', // 气泡里要显示的文字
            display: 'ALWAYS' // 让气泡一直显示出来，不需要用户点击
          }
        }, ];

        // 4. 更新地图中心店，地图中心可以取固定点(将目标点设为地图中心点)
        this.setData({
          latitude: this.data.FIXED_LAT,
          longitude: this.data.FIXED_LNG,
          markers
        });
      },
      fail: (e) => {
        wx.showToast({
          title: '定位失败',
          icon: 'none'
        });
      }
    });
  },

  // 点导航按钮实现效果,点击后会调用腾讯地图默认的导航页面导航
  navigateToMap() {
    const {
      longitude,
      latitude
    } = this.data;
    // 调用小程序API打开腾讯地图并进行导航
    wx.openLocation({
      longitude, // 目的地坐标
      latitude,
      name: '示例目的地：目标点', // 标记点名称，可根据实际情况设置
      scale: 18, // 地图缩放级别，可根据实际情况设置
      address:'示例地址：上海人民广场'
    });
  },
})

wxss

.map_container{
  position: absolute;
  top: 0;
  bottom: 80px;
  left: 0;
  right: 0;
}
.map{
  width: 100%;
  height: 100%;
}
.map_text{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 80px;
  background: #fff;
  padding: 0 15px;
}
text{
  margin: 5px 0;
  display: block;
  font-size:12px;
}
.h1{
  margin: 15px 0;
  font-size:15px;
}

wxml

<view class="map_container">
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
<view class="map_text">
  <text class="h1">示例目的地：目标点</text>
  <text>示例地址：上海人民广场</text>
  <view bind:tap="navigateToMap" style="border: 1rpx solid #cccccc;margin-top: 50rpx;width: fit-content;padding: 20rpx 40rpx;border-radius: 20rpx;background-color: #eeeeee;margin-left: 50%;transform: translateX(-50%);">导航</view>
</view>