微信小程序地图(map)组件点击(tap)获取经纬度的方法

微信小程序中使用地图(map)组件，通过点击(tap)获取经纬度，按照官方的回应，暂时是没法做到的，从地图组件API多有残缺判断，怀疑是个实习生干的...

做个变通，适用性有限，请大家参考。基本思路就是在地图上铺满一层marker，从而通过点击marker获得经纬度。

复制代码 代码如下:<map id="map" longitude="102.324520" latitude="40.099994" scale="4" bindcontroltap="controltap" polygons="{{polygons}}" bindregionchange="regionchange" markers="{{markers}}" bindmarkertap="markertap" show-location style="width: 100%; height: 700px;"></map>

const app = getApp()

const markersize = 30

function range(start, edge, step) {
 for (var ret = [];
  (edge - start) * step > 0; start += step) {
  ret.push(start);
 }
 return ret;
}

function markers(northeast, southwest, scale, width, height) {

 const markerslng = (northeast.longitude - southwest.longitude) * markersize / width
 const markerslat = (northeast.latitude - southwest.latitude) * markersize / height

 const maxlon = northeast.longitude
 const minlon = southwest.longitude
 const maxlat = northeast.latitude
 const minlat = southwest.latitude

 const lons = range(minlon, maxlon, markerslng)
 const lats = range(minlat, maxlat, markerslat)

 let _markers = []
 lons.forEach((lon, i) => {
  lats.forEach((lat, j) => {
   _markers.push({
    id: lon + ',' + lat,
    latitude: lat,
    longitude: lon,
    iconPath: '/marker.png',
    alpha: 0.1, //将图片设置为透明,通过开发者工具看不出效果,但真机是有效果的
    width: markersize,
    height: markersize
   })
  })
 })
 return _markers
}

Page({
 data: {
  polygons: [],
  controls: [{
   id: 1,
   position: {
    left: 0,
    top: 300 - 50,
    width: 50,
    height: 50
   },
   clickable: true
  }],
  markers: []
 },
 createMarkers() {

  this.mapCtx = wx.createMapContext('map')
  const query = wx.createSelectorQuery()
  const map = query.select('#map').boundingClientRect()

  let that = this

  that.mapCtx.getRegion({
   success(res1) {
    that.mapCtx.getScale({
     success(res2) {
      query.exec((res) => {
       let width = res[0].width;
       let height = res[0].height;
       let _markers = markers(res1.northeast, res1.southwest, res2.scale, width, height)
       that.data.markers = _markers
       that.setData(that.data)
      })
     }
    })
   }
  })
 },
 regionchange(e) {
  this.createMarkers()
 },
 markertap(e) {
  console.log(e.markerId)
 },
 controltap(e) {
  console.log(e.controlId)
 },
 onReady(e) {
  this.createMarkers()
 }
})

效果如图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• 微信小程序 使用腾讯地图SDK详解及实现步骤
• 微信小程序 高德地图SDK详解及简单实例（源码下载）
• 微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
• 微信小程序+腾讯地图开发实现路径规划绘制
• 微信小程序实现打开内置地图功能【附源码下载】
• 微信小程序开发之map地图实现教程
• 微信小程序 腾讯地图SDK 获取当前地址实现解析