微信小程序：map组件在mpvue中的实践

map组件在mpvue中的实践

MAP组件文档地址

    <map name="map-zsb"
    id="map-zsb"
    class="map-zsb" 
    scale="18" 缩放比例,默认16取值范围5-18
    :latitude="lat"
    :longitude="lng" 地图中心点对应的经纬度
    :markers="markers" 标记数组
    @callouttap="calloutTap" 点击气泡调用
    @regionchange="regionchange" 拖动地图时调用begin和end方法
    @begin="begin" 开始拖动时调用
    @end="end" 结束拖动时调用
    show-location 显示带有方向的当前定位点
    >
    </map>

	let touchTimeStamp = 0
	// 监听地图是否被拖动
    regionchange (param) {
      console.log('change', param) // （实测不会输出）
    },
    // 开始拖动
    begin ({timeStamp}) {
      console.log('begin')
      touchTimeStamp = timeStamp
    },
    // 结束拖动
    end ({timeStamp}) {
      console.log('end')
     // 添加拖动时长判断，防止误触操作
      if (timeStamp - touchTimeStamp > 100) {
      	// 获取地图的中心点的坐标
        this.mapCtx.getCenterLocation({
          success: (res) => {
          	// 返回经纬度信息
          }
        })
      }
    },
    // 点击气泡回调
    calloutTap (marker) {
 		// 点击气泡的操作
    },

其他地图相关的API：

• MapContext wx.createMapContext(string mapId, Object this)
  创建 map 上下文 MapContext 对象。

this.mapCtx = wx.createMapContext('map-zsb')
// 其中map-zsb是地图对应id，获取地图对应的上下文。

• MapContext.getCenterLocation()
  获取当前地图中心的经纬度。返回的是 gcj02 坐标系，可以用于 wx.openLocation()

    this.mapCtx.getCenterLocation({
      success(res) {
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })

• MapContext.moveToLocation()
  将地图中心移动到当前定位点。需要配合map组件的show-location使用

 this.mapCtx.moveToLocation() 
 // 例如点击定位操作，可以使地图中心位置为当前所做的坐标

• MapContext.translateMarker(Object object)
  平移marker，带动画

• MapContext.includePoints(Object object)
  缩放视野展示所有经纬度

• MapContext.getRegion()
  获取当前地图的视野范围

• MapContext.getScale()
  获取当前地图的缩放级别

其他使用方法

  <div class="container">
    <map name="map-demo"
    id="map-demo"
    class="map-demo"
    :latitude="latitude"
    :longitude="longitude"
    @regionchange="regionchange"
    @begin="begin"
    @end="end"
    @callouttap="calloutTap"
    show-location
    >
      <cover-image class="location-marker"
          src="/static/img/map/icon_center.png"
          @click.stop="onClickLocation"
      ></cover-image>
      <!--核心代码-->
      <cover-view class="center-marker-wrapper" >
      	<!--说明wrapper-->
        <cover-view class="text-center">
        	<!--地址信息--->
          <cover-view class="text-body">{{currentPlace}}</cover-view>
          <!--箭头图片-->
          <cover-image class="text-bottom" src="/static/img/found/icon_di.png"></cover-image>
        </cover-view>
        <!--当前对应的点-->
        <cover-image class="img-center" src="/static/img/found/icon_quan.png"></cover-image>
      </cover-view>
      <cover-view class="address">
        <cover-view class="address-desc">
          <cover-view class="blur">重新定位，需拖动地图</cover-view>
          <cover-view class="detail">{{currentPlace}}</cover-view>
        </cover-view>
        <cover-view class="btn-address" @click="setStartPlace">确定</cover-view>
      </cover-view>
    </map>
  </div>
</template>

布局逻辑将center-marker-wrapper设置为fixed，放在屏幕中间即可。

另外经纬转地址使用qqmap-sdk，注意配置MAPKEY

import QQMapWX from '@/common/lib/qqmap-wx-jssdk.js'
const qqmapsdk = new QQMapWX({
  key: QQMAPKey
})
let touchTimeStamp = 0
regionchange (param) {
  console.log('change', param)
},
begin ({timeStamp}) {
  console.log('begin')
  touchTimeStamp = timeStamp
},
end ({timeStamp}) {
  console.log('end')
  if (timeStamp - touchTimeStamp > 50) {
    this.mapCtx.getCenterLocation({
      success: (res) => {
        reverseGeocoder(qqmapsdk, res).then(res => {
        this.currentPlace = res.result.address 
      }
    })
  }
},