微信小程序 騰訊地圖大頭針定位，獲取當前地址，地圖移動選點，定位當前位置

主要實現功能：

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包下載地址：https://lbs.qq.com/qqmap_wx_jssdk/index.html
 

獲取當前位置：

  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，以上就是實現功能的核心代碼塊了
關於搜索關鍵字功能的實現，我會在下個博客中給出