您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2019-01-09 10:31:22
  • 来源:  
  • 栏目:解决方案

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

 

微信小程序中使用地图(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()   } })

效果如图

15.gif



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部