小程序 实现两种导航功能

第一种：导航到店

第二种：点击地图标记

小程序map组件用的是腾讯地图，我这里两种方法都是用经纬度来获取定位，先在腾讯地图经纬度查询,查询到后，再修改data里相对应的longitude和latitude就可以了，代码如下

<!--wxml-->

<!--导航到店-->
<view class="item">
    <image class="item_img4" src="../../images/map.png"></image>
    <view class="look">{{map}}</view>
    <button bindtap="getLocationInfo" class="item_dd">{{stop}}</button>
    <view class="right_arrow" bindtap="getLocationInfo"></view>
</view>

 	
<!--显示地图-->
<!--markers 标记点-->
<!--show-location  显示带有方向的当前定位点-->
<!--scale  缩放级别，取值范围为3-20-->
<map class="map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="16" markers="{{markers}}" bindmarkertap="clickMap" data-markers='{{markers[0]}}' show-location></map>

<!--wxss-->

.map{
  width: 100%;
  height: 800rpx;
}
.item{
  display: flex;
  padding: 5rpx;
  background: white;
  align-items: center;
  border-bottom: 1px solid gainsboro;
  height: 100rpx;
}
.item_img4{
  width: 130rpx;
  height: 50rpx;
  margin-left: 65rpx;
  margin-right: 25rpx;
}
.look{
  width: 700rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 80rpx;
  margin-top: 90rpx;
  margin-right: 40rpx;
  margin-left: 15rpx;
}
.item_dd{
  font-size: 35rpx;
  color: gray;
  margin-left: 145rpx;
  margin-right: 65rpx;
  margin-top: 20rpx;

  width: 100%;
  background:white;
  border: none;
  text-align: left;
  padding: 0px;
  line-height: 1.3;
  font-size: 16px;
}
.item_dd::after{
  border: none;
  border-radius: 0;
}
.right_arrow{
  border: solid black;
  border-width: 0 3px 3px 0;
  padding: 3px;
  position: absolute;
  right: 15px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-top: 10rpx;
}

<!--js-->

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;

Page({
	data: {
    stop: '导航到店',
    map: '查看地图',
    markers: [{
      id: 0,
      name: 'XXX',
      address: 'XXX',
      longitude: 109.79158, // 经度
      latitude: 20.684562, // 纬度
      width: 50,
      height: 50
    }]
  },
onLoad() {
    qqmapsdk = new QQMapWX({
      key: 'MTYBZ-H5LWG-FPCQK-IS2LT-KKQMO-5OBUX'
    });
  },
//位置详情隐私
    areaTips: function (e) {
      Dialog.alert({
          message: '开启详细定位，可以增加信息的真实感，便于你的信息更容易被附近的人所查看。但是可能涉及定位隐私的泄露！',
      }).then(() => {
          // on close
      });
  },

    //获取定位
  openMap: function (e) {
      this.updateMapCompass(this);
  },

	 //获取定位
  updateMapCompass: function (that) {
      wx.authorize({
          scope: 'scope.userLocation',
          success: () => {
              that.setData({
                  isLocaltion: true
              })
              that.getLocationInfo();
          },
          fail: () => {
              that.setData({
                  isLocaltion: false
              })
          }
      })
  },


  //获取位置信息
  getLocationInfo: function () {
      var that = this;
      that.setData({
          locationStatus: 0,
          localMsg: '定位中'
      })
      wx.getLocation({
          type: 'gcj02',
          success: function (res) {
              console.log('getLocation:', res)
              qqmapsdk.reverseGeocoder({
                  location: {
                      latitude: res.latitude,
                      longitude: res.longitude
                  },
                  success: function (res) {
                      console.log('reverseGeocoder', res);
                      that.setData({
                          locationStatus: 1,
                          localMsg: '定位成功',
                          localName: res.result.ad_info.district
                      })
                      //赋值
                      that.data.latitude = res.result.location.lat;
                      that.data.longitude = res.result.location.lng;
                      that.setData({
                          //address: res.result.address
                      })
                      //跳转地图
                      wx.openLocation({
                        latitude: that.data.markers[0].latitude,
                        longitude: that.data.markers[0].longitude,
                        name: that.data.markers[0].name,
                        address: that.data.markers[0].address,
                        scale: 18
                      })
                  },
                  fail: function (res) {
                      console.log(res);
                      that.setData({
                          locationStatus: 2,
                          localMsg: '定位失败'
                      })
                  },
                  complete: function (res) {
                      console.log(res);
                  }
              });
          },

	clickMap(e){
        let markers = e.currentTarget.dataset.markers
        wx.getLocation({
        type:'wgs84',
        success(res){
        wx.openLocation({
          latitude:markers.latitude,
          longitude:markers.longitude,
          name:markers.name,
          address:markers.address,
          scale:18
        })
      },
      fail(err){
        wx.showModal({
          title:'需要授权',
          content:'需要授权位置信息，去设置开启位置权限',
          confirmText:'去设置',
          success(res){
              if(res.confirm){
                  wx.openSetting()
              }
          }

        })
      }
    })
  
  },

})

最终效果：