微信小程序集成騰訊地圖

微信小程序集成騰訊地圖，實(shí)現(xiàn)用戶附近停車位搜索顯示。

騰訊開發(fā)者Key申請

官方地址：https://lbs.qq.com/

下載工具JS

微信小程序JS代碼

// pages/check-services.js
const app = getApp()
// 引入SDK核心類
var QQMapWX = require('../../utils/qqmap-wx-jssdk');
// 實(shí)例化API核心類
var qqmapsdk = new QQMapWX({
  key: 'OJ7BZ-KNMCJ-XXXXXXXWQP3-3YBNU', // 必填
});

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    // 中心緯度
    latitude: 36.10396,
    // 中心經(jīng)度
    longitude: 103.71878,
    // 縮放級別，取值范圍為3-20
    scale:3,
    // 顯示帶有方向的當(dāng)前定位點(diǎn)
    showLocation:true,
    // 顯示指南針
    showCompass:true,
    // 顯示比例尺，工具暫不支持
    showScale:true,
    // 標(biāo)記點(diǎn)
    markers: [],
    keyword: '',
    // 當(dāng)前用戶的地址
    userLocation: {}
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
    let _this = this
    // 獲取當(dāng)前用戶的地理位置
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        _this.userLocation = res
        _this.initMap()
        console.log(res)
        _this.latitude = res.latitude;
        _this.longitude = res.longitude;
      }
    })
  },

  initMap() {
    let _this = this
    // 獲取當(dāng)前位置
    wx.getSetting({
      success(res) {
        //這里判斷是否有位置權(quán)限
        if (res.authSetting['scope.address']) {
          qqmapsdk.search({
            keyword: "停車位",
            // location: _this.userLocation, //設(shè)置周邊搜索中心點(diǎn)
            boundary:`nearby(${_this.userLocation.latitude,_this.userLocation.longitude,10,1})`,
            success(res) {
              console.log('--設(shè)置周邊搜索中心點(diǎn)-------', res)
              var result = res.data;
              var marks = [];
              for (var i = 0; i < result.length; i++) {
                // 獲取返回結(jié)果，放到mks數(shù)組中
                marks.push({
                  title: result[i].title,
                  id: Number(result[i].id),
                  latitude: result[i].location.lat,
                  longitude: result[i].location.lng,
                  iconPath: "../../images/icons/icon_location.png", //圖標(biāo)路徑
                  width: 30,
                  height: 30,
                  address: result[i].address
                })
              }
              console.log('----marks', marks)
              _this.setData({ //設(shè)置markers屬性，將搜索結(jié)果顯示在地圖中
                markers: marks
              })
            },
            fail: function (res) {
              // console.log(res.data);
            },
            complete: function (res) {
              console.log('complete-----', res);
            }
          })
        }
      }
    })
  },

  handlerMarkerTap(e) {
    console.log('handlerMarkerTap', e, this.data.markers)
    let marks = this.data.markers
    marks.map(item => {
      if (item.id == e.markerId) {
        item.callout = {
          content: item.address,
          color: '#FF4D4F',
          fontSize: 10,
          bgColor: '#fff',
          padding: 5,
          display: 'ALWAYS',
          textAlign: 'center'
        }
      }
    });
    console.log(marks);
    this.setData({
      markers: marks, //記錄用戶點(diǎn)擊的marker
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {
    this.mapCtx = wx.createMapContext('myMap')
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage() {

  }
})

微信小程序Wxml代碼

<view class="page-body">
  <view>
    <map id="myMap" style="width: 100vw; height: 100vh;" latitude="{{latitude}}" longitude="{{longitude}}" bindmarkertap="handlerMarkerTap" markers="{{markers}}" :scale="scale" :show-location="showLocation"
    :show-compass="showCompass" :show-scale="showScale">
    </map>
  </view>
</view>

效果展示

下面這個是我的個人公共號 只會寫B(tài)ug的程序猿，大家可以關(guān)注一下，一鍵三連。相互交流學(xué)習(xí)。
文章來源地址http://www.zghlxwxcb.cn/news/detail-764783.html

到了這里，關(guān)于微信小程序集成騰訊地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！