腾讯地图大头针定位

主要实现功能：

a.进入地图界面，会自动获取当前位置（用户需授权地理位置权限），并显示省市区在左上角，根据个人需求，我只显示了区
b.大头针实现，拖动地图，大头针都能获取到位置
c.左下角定位当前位置实现，当移动地图到别的位置，点击左下角图标，会回归到当前位置

下面是代码的实现
1. app.json文件中

  "permission":{
   "scope.userLocation":{
     "desc":"授权当前位置"
   }
  }

弹出授权权限的框，让用户手动授权

2. map.wxml 布局文件

<view class='view-c'>
<view class='view-top'>
<text style="font-size: 24rpx;margin-top: 40rpx;  color: #b65151">当前：{{district}}</text>
<input placeholder="输入城市"  class='input-c' bindinput="getsuggest" value="{{backfill}}" />
</view>
<!-- 搜索 -->
<view wx:for="{{suggestion}}" wx:key="index" class="{{showview?'hidden':'view-center'}}">
    <!--绑定回填事件-->
    <view >
    <!--根据需求渲染相应数据-->
    <!--渲染地址title-->
    <view class='item-title'  bindtap="backfill" id="{{index}}">{{item.title}}</view>
    <!--渲染详细地址-->
    <view class='item-details'>{{item.addr}}</view>
    </view>
    </view>
<map
id="ofoMap"
longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" 
scale="{{scale}}"
covers="{{covers}}" show-location
  class="{{showview?'map-c':'hidden'}}"
    bindregionchange="bindregionchange"
    controls="{{controls}}"
  bindcontroltap='bindcontroltap'
>
</map>
</view>

可以根据自己的需求画布局，这里就不贴出wxss样式文件了
 

3. map.js

const app = getApp()
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
var qqmapsdk;

// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});

关于jar包，我这里用的是腾讯地图的，可以去官网下

jar包下载地址：微信小程序JavaScript SDK | 腾讯位置服务
 

获取当前位置：

  onLoad: function () {
    qqmapsdk = new QQMapWX({
      key: 'CLTBZ-3GVWD-LZY4D-HCY2K-RK3EE-UDBWF' //这里自己的key秘钥进行填充
    });
    var that = this
    wx.showLoading({
      title: "定位中",
      mask: true
    })
 
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
           controls: [
            {
              id: 1,
              iconPath: '/images/marker.png',   //  大头针图片
              position: {
                left: res.windowWidth / 2 - 11,
                top: res.windowHeight / 2 - 70,
                width: 26,
                height: 45
              },
 
              clickable: true
            },
            {
              id: 2,
              iconPath: '/images/location.png', // 左下角定位图片
              position: {
                left: 20,
                top: res.windowHeight - 100,
                width: 40,
                height: 40
              },
              clickable: true
            },
          ]
        })
      }
    })
    wx.getLocation({
      type: 'wgs84',
      //定位成功，更新定位结果
      success: function (res) {
      
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy
        //经纬度转化为地址
        that.getLocal(latitude, longitude)
        that.setData({
          longitude: longitude,
          latitude: latitude,
          speed: speed,
          accuracy: accuracy
        })
    
      },
      //定位失败回调
      fail: function () {
        wx.showToast({
          title: "定位失败",
          icon: "none"
        })
      },
 
      complete: function () {
        //隐藏定位中信息进度
        wx.hideLoading()
      }
 
    })
   
  }

经纬度转换为地址：

 getLocal: function (latitude, longitude) {
    let vm = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        console.log(JSON.stringify(res));
        let province = res.result.ad_info.province
        let city = res.result.ad_info.city
        let district = res.result.ad_info.district
        vm.setData({
          province: province,//省
          city: city,//市
          district: district,//区
    
        })
 
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    });
  }

实现大头针移动选点

  bindregionchange: function (e) {
    var that = this
    if (e.type == "begin") {
      console.log("begin");
    } else if (e.type == "end") {
      var mapCtx = wx.createMapContext("ofoMap")
      mapCtx.getCenterLocation({
        success: function (res) {
          var latitude = res.latitude
          var longitude = res.longitude
          that.getLocal(latitude, longitude)
        }
      }) 
    }
  }

点击icon回归当前位置

  bindcontroltap: function (e) {
    switch (e.controlId) {
      // 当点击图标location.png的图标，则触发事件movetoPositioon()
      case 2:
          this.movetoPosition();
        break;
     
     }
  }

移动定点

  movetoPosition: function () {
    this.mapCtx.moveToLocation();
  },



  onShow: function () {
    var that=this;
    console.log("onShow");
    that.mapCtx = wx.createMapContext("ofoMap");
    //this.movetoPosition();
    that.mapCtx.getCenterLocation({
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.getLocal(latitude, longitude)
      }
    }) 
  },

ok，以上就是实现功能的核心代码块了
关于搜索关键字功能的实现，我会在下个博客中给出