微信小程序地图(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 相关文章推荐
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
Javascript玩转继承(二)
May 08 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
最简单的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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
PyQt5实现登录页面
2020/05/30 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
升国旗演讲稿
2014/09/05 职场文书
公司财务部岗位职责
2015/04/14 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
Python+DeOldify实现老照片上色功能
2022/06/21 Python