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


Posted in Javascript onJanuary 10, 2019

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

效果如图

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
javascript操作excel生成报表示例
May 08 Javascript
Java File类的常用方法总结
Mar 18 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
最简单的JS实现json转csv的方法
Jan 10 #Javascript
puppeteer实现html截图的示例代码
Jan 10 #Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 #Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 #Javascript
浅谈JavaScript 代码简洁之道
Jan 09 #Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 #Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 #Javascript
You might like
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
IStream与TStream之间的相互转换
2008/08/01 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
浅析Python中的多重继承
2015/04/28 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Python 移动光标位置的方法
2019/01/20 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Python list和str互转的实现示例
2020/11/16 Python
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
党员教师一句话承诺
2014/05/30 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
标准发言稿结尾
2019/07/18 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
mysql sock文件存储了什么信息
2022/07/15 MySQL