【小程序开发】定位功能实现

效果展示

• 主要包括：借助高德或腾讯地图API → 获取当前位置 + 标记位置点 + 计算二者距离
• 源代码：详见本博客【资源】部分

小程序定位功能 页面展示

主要参考

微信小程序地图实现点击（marker）气泡展示（callout）距离，点击回到当前位置 - 简书微信小程序地图实现点击气泡，展示callout，开发过程中遇到的需求，大致就和共享单车那个差不多，在很多个marker中点击一个marker，显示不同颜色的marker，没有...https://www.jianshu.com/p/3dcd693afc19

 微信小程序之map地图 - 简书微信小程序地图操作比较简单，api也很少，使用map组件来展示。说到地图，那就先来看基础定位：定位用到wx.getLocation(OBJECT)函数，代码如下： 定位成功会...https://www.jianshu.com/p/01efa02134ba

• 微信小程序map地图组件之拓展功能：指南针显示与否、旋转开启与否、缩放开启与否、拖动开启与否以及卫星图开启与否。

微信小程序—地图组件map-功能扩展_0禾呈0的博客-CSDN博客https://blog.csdn.net/qq_41386332/article/details/103537189

#index.js
    showCompass: true,
    enableZoom: true,
    enableScroll: true,
    enableRotate: true,
    enableSatellite: true

#index.wxml
  show-compass="{{showCompass}}"
  enable-rotate="{{enableRotate}}"
  enable-zoom="{{enableZoom}}"
  enable-scroll="{{enableScroll}}"
  enable-satellite="{{enableSatellite}}"

关键代码

• index.js

var QQMapWX = require('qqmap-wx-jssdk.js');
var qqmapsdk;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showCompass: true,
    enableZoom: true,
    enableScroll: true,
    enableRotate: true,
    enableSatellite: true,
    mapKey: 'BURBZ-XE7K3-TS43N-YRIQT-XIMFS-72F4H',
    latitude: '',
    longitude: '',
    distance: '',
    distance: '',
    scale: 16,
    currMaker: {},
    markers: []
  },

  /**
   * 回到自己位置
   */
  controltap() {
    this.mapCtx.moveToLocation()
    this.getMyLocation()
    this.setData({
      scale: 17
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: _this.data.mapKey
    })
    this.getMyLocation()
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
  // 获取我的位置
  getMyLocation: function () {
    var that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
        let arr = [{
          iconPath: '位置-红色.png',
          width: 25,
          height: 25,
          address: '2020年4月24日20点30分 象群  农场八队底 森林边 温泉',
          latitude: 22.2313995,
          longitude: 100.3799973,
          id: 900000000,
          callout: {
            display: 'BYCLICK'
          }
        }, {
          iconPath: '位置-红色.png',
          width: 25,
          height: 25,
          address: '2020年10月19日20点55分 另一象群 农场八队（温泉）农地；2020年11月14日19点50分+2020年11月15日11点30分+2020年11月16日20点',
          latitude: 22.2320004,
          longitude: 100.3789978,
          id: 900000001,
          callout: {
            display: 'BYCLICK'
          }
        }, {
          iconPath: '位置-红色.png',
          width: 25,
          height: 25,
          address: '①2020年4月23日22点 象群 农场八队底 香蕉地；②2020年4月25日9点50分 大公象 象老四 农场八队（温泉）附近香蕉地；③2020年4月25日19点40分 大公象 农场八队（温泉）附近香蕉地',
          latitude: 22.2327003,
          longitude: 100.3809967,
          id: 900000002,
          callout: {
            display: 'BYCLICK'
          }
        }]
        that.setData({
          markers: arr
        })
      }
    })
  },
  // marker的点击事件
  bindmarkertap(e) {
    console.log('e', e)
    let that = this
    let _markers = that.data.markers
    let markerId = parseInt(e.detail.markerId)
    wx.showLoading({
      title: `${markerId}`,
    })
    _markers.forEach(item => {
      console.log('item', item)
      if (parseInt(item.id) === markerId) {
        console.log('item', item)
        that.setData({
          currMaker: item
        })
      }
    })
    let currMaker = that.data.currMaker
    console.log('currMaker', that.data.currMaker)
    qqmapsdk.calculateDistance({
      to: [{
        latitude: currMaker.latitude,
        longitude: currMaker.longitude
      }],
      success: function (res) {
        let destinationDistance = res.result.elements[0].distance
        let distanceKm = `${(destinationDistance/1000)}km` 
        let arr = []
        for (let i = 0; i < _markers.length; i++) {
          if (parseInt(_markers[i].id) === markerId) {
            arr.push({
              address: _markers[i].address,
              latitude: _markers[i].latitude,
              longitude: _markers[i].longitude,
              id: _markers[i].id,
              width: 40,
              height: 40,
              iconPath: '位置-红色.png',
              callout: {
                content: `距您${distanceKm}`,
                display: 'ALWAYS',
                color: '#333333',
                bgColor: '#fff',
                padding: 10,
                borderRadius: 10,
                borderColor: '#fff',
                fontSize: 16,
                borderWidth: 5,
                textAlign: 'center',
              },
            })
          } else {
            arr.push({
              address: _markers[i].address,
              latitude: _markers[i].latitude,
              longitude: _markers[i].longitude,
              id: _markers[i].id,
              width: 25,
              height: 25,
              iconPath: '位置-红色.png',
              callout: {
                display: 'BYCLICK'
              }
            })
          }
        }
        that.setData({
          markers: arr
        })
        wx.hideLoading({
          success: (res) => {
            console.log(arr)
          },
        })
      }
    })
  }
})

• index.wxml

<view class="page-section-gap">
    <map id="myMap" 
        show-compass="{{showCompass}}"
        enable-rotate="{{enableRotate}}"
        enable-zoom="{{enableZoom}}"
        enable-scroll="{{enableScroll}}"
        enable-satellite="{{enableSatellite}}"

        style="width: 100%; height: 100vh;"
        latitude="{{latitude}}" 
        longitude="{{longitude}}"
        markers="{{markers}}"
        controls="{{controls}}" 
        scale="{{scale}}" 
        bindmarkertap="bindmarkertap"
        bindcontroltap="controltap"
        bindcallouttap="clickCallout" 
        bindtap="clearMap" 
        polyline="{{polyline}}" 
        show-location
        show-scale show-compass>
    </map>
    <view class="contentBottomBox">
        <view class="location" bindtap="controltap">
            <image src="位置-红色.png" class="locationIcon"></image>
        </view>
    </view>
</view>