微信小程序的获取位置、导航

最新推荐文章于 2024-04-13 10:44:03 发布

富可敌锅

最新推荐文章于 2024-04-13 10:44:03 发布

阅读量220

点赞数

分类专栏：前端文章标签：小程序 html5

XJINGUO

本文链接：https://blog.csdn.net/hy_0452/article/details/112004254

版权

前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

该博客介绍了如何在微信小程序中实现地图功能，包括设置地图的缩放比例、显示位置标记、添加导航按钮以及绑定事件来切换到当前位置。同时，展示了如何通过`bindcontroltap`事件处理回到当前位置的操作，并在用户点击导航按钮时调用`onGuideTap`函数，利用`wx.openLocation`打开地图导航到指定的经纬度位置。

摘要由CSDN通过智能技术生成

WXML：

  <view class="item">
    <view class="map_container">
      <map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}'
        controls="{{controls}}" bindcontroltap="bindcontroltap" polyline='{{polyline}}' circles="{{circles}}"
        bindmarkertap='bindmarkertap' show-location></map>
    </view>

    <!-- 以下是导航部分 -->
    <view class='list-guide'>
     <!--   <view class="item-top">
        <view class="item-top-title">门店名称：{{cabinetInfo.name}}</view>
      </view>
      <view class="address-bottom">地址：{{cabinetInfo.province}} {{cabinetInfo.city}} {{cabinetInfo.region}}
        {{cabinetInfo.address}}</view>-->

      <view bindtap="onGuideTap"  data-latitude='{{cabinetInfo.latitude}}' data-longitude='{{cabinetInfo.longitude}}'
        data-bankName='{{cabinetInfo.name}}'>
        <image src='../../../images/navigation.png' class='list-guide-imgae'></image>
        <text class='list-guide-text'>导航</text>
      </view>
    </view>
  </view>

bindcontroltap="bindcontroltap"回到当前位置的事件
data-latitude='{{cabinetInfo.latitude}}' data-longitude='{{cabinetInfo.longitude}}' data-bankName='{{cabinetInfo.name}}'此处的latitude、longitude、bankName以及上处都是在data中声明的
WXSS：

/* pages/map/map.wxss */
.map_container {
  height: 260px;
  width: 100%;
}

.map {
  height: 100%;
  width: 100%;
}

.list-guide {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-top: 1px solid #ededed;
  height: 80rpx;
}

.list-guide-imgae {
  height: 70rpx;
  width: 70rpx;
  margin-right: 20px;
  vertical-align: middle;
}
.list-guide-text {
  vertical-align: middle;
  line-height: 90rpx;
  font-size: 35rpx;
}

JS:

  /**
   * 页面的初始数据
   */
  data: {
    cabinet: null,
    orders: null,
    date: null,
    latitude: "",
    longitude: "",
    scale: 14, //缩放比例
    markers: [],
    //controls控件 是左下角圆圈小图标,用户无论放大多少,点这里可以立刻回到当前定位(控件
    //（更新一下,即将废弃，建议使用 cover-view 代替）)
    controls: [{
      id: 1,
      iconPath: '../../../images/map_position.png',
      position: {
        left: 15,
        top: 260 - 50,
        width: 20,
        height: 20
      },
      clickable: true
    }],
  },
  
   //------------------获取地图
  getLocationMap: function () {
    var that = this
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        that.setData({
           //当前的经纬度
          latitude: res.latitude,
          longitude: res.longitude,
          markers: [{
          //将要去往的地方的描述
            latitude: that.data.cabinet.latitude,
            longitude: that.data.cabinet.longitude,
            callout: {
              content: that.data.cabinet.name,
              bgColor: "#fff",
              padding: "5px",
              borderRadius: "2px",
              borderWidth: "1px",
              borderColor: "#07c160",
            }
          }]
        })
      }
    })
  },
  
 //----当前位置
  bindcontroltap(e) {
    var that = this;
    if (e.controlId == 1) {
      that.setData({
        latitude: that.data.cabinet.latitude,
        longitude: that.data.cabinet.longitude,
        scale: 14,
      })
    }
  },
  
  //-------导航
  onGuideTap: function (e) {
    var lat = Number(e.currentTarget.dataset.latitude);
    var lon = Number(e.currentTarget.dataset.longitude);
    var bankName = e.currentTarget.dataset.bankname;
    wx.openLocation({
      type: 'gcj02',
      latitude: lat,
      longitude: lon,
      name: bankName,
      scale: 28
    })
  }