小程序开发之Map地图组件详解

小程序开发之Map地图组件详解

Map组件简介

Map组件是小程序中的原生组件，使用时需要注意相关限制。个性化地图能力可以在小程序后台“设置-开发者工具-腾讯位置服务”申请开通。设置subkey后，小程序内的地图组件均会使用该底图效果，底图场景的切换会在后续版本提供。

本文主要展示地图组件的几个核心功能：

• 经纬度转预览图
• 经纬度转大图
• 地理位置转经纬度
• 预览图缩放

最终效果如下：

Map组件代码实现

HTML部分

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
    ></map>
  </view>
  <view class="btn-area">
    <button bindtap="chooseLocation" class="page-body-button" type="primary">选择位置</button>
    <button bindtap="openLocation" class="page-body-button" type="primary">打开位置</button>
    <button bindtap="getCenterLocation" class="page-body-button" type="primary">获取位置</button>
    <button bindtap="moveToLocation" class="page-body-button" type="primary">移动位置</button>
    <button bindtap="translateMarker" class="page-body-button" type="primary">移动标注</button>
    <button bindtap="includePoints" class="page-body-button" type="primary">缩放视野展示所有经纬度</button>
  </view>
</view>

JavaScript部分

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 创意园'
    }],
    covers: [{
      latitude: 23.099994,
      longitude: 113.344520,
      iconPath: '/image/location.png'
    }, {
      latitude: 23.099994,
      longitude: 113.304520,
      iconPath: '/image/location.png'
    }]
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
  chooseLocation:function(){
    var that = this;
    wx.chooseLocation({
      success: function (res) {
        console.log(res, "location")
        console.log(res.name)
        console.log(res.latitude)
        console.log(res.longitude)
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  openLocation:function(){
    var that = this;
    wx.openLocation({
      latitude: that.data.latitude,
      longitude: that.data.longitude,
      scale: 18
    })
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})

CSS部分

.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-body-button {
  margin-bottom: 30rpx;
}

总结

本文详细介绍了小程序开发中Map组件的使用方法，包括其核心功能和代码实现。通过本文，开发者可以快速掌握Map组件的使用技巧，为小程序开发提供便利。

本文原文来自Cnblogs