酷站(www.ku0.com)-致力于为互联网从业者提供专业的网络资源

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

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

来源:脚本之家 作者:秩名 人气: 发布时间:2019-01-10
本篇文章主要介绍了微信小程序地图(map)组件点击(tap)获取经纬度的教程,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。
本篇文章给大家介绍微信小程序地图(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()
 }
})

效果如图:




 
版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:

相关文章

  • 详解在Vue中实现添加全局store的方法

    详解在Vue中实现添加全局store的方法

    Vue添加全局store 在命令行中输入安装 1 npm install --save vuex 在main.js文件中引用 store和在new Vue中声明store 1 2 import store from ./store store, 在src中创建一个page文件 在page文件下创建......
    03-30
  • Vue之Axios的异步通信介绍

    Vue之Axios的异步通信介绍

    1.什么是Axios Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下: 从浏览器中创建XMLHttpRequests 从node.js创......
    03-29
  • AngularJS实现多级下拉框的代码

    AngularJS实现多级下拉框的代码

    具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 div ng-app=MultiDropDownApp ng-controller=MultiDropDownControl as vm label选择地址:/label !--ng-options加载所有选择项,ng-model记录当前选择项-- sel......
    03-25
  • 详解在vue2项目中封装echarts地图的优雅方法

    详解在vue2项目中封装echarts地图的优雅方法

    前言 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排列的数据、图文混搭、视频......这里除了封装echarts区域地图模块,还介绍了下自定义弹窗的实现......
    03-19
  • Vue的diff算法原理介绍

    Vue的diff算法原理介绍

    思维导图 0. 从常见问题引入 虚拟dom是什么? 如何创建虚拟dom? 虚拟dom如何渲染成真是dom? 虚拟dom如何patch(patch) 虚拟DOM的优势?(性能) Vue中的key到底有什么用,为什么不......
    03-17
  • Vue2.0脚手架搭建方法

    Vue2.0脚手架搭建方法

    一、安装node.js 1、进入官网https://nodejs.org/en/download/ 根据电脑操作系统,选择相应版本的文件进行下载。 2、下载文件后双击进行安装 安装完成以后进入node.js的安装目录:......
    03-14
  • Vue.js中v-show和v-if指令的用法介绍

    Vue.js中v-show和v-if指令的用法介绍

    一、v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件,语法如下: 1 v-show=判断变量 例如: v-show=true,表示显示DOM元素。 v-show=fal......
    03-13
  • jQuery操作元素节点的介绍

    jQuery操作元素节点的介绍

    jQuery中节点操作主要分为以下几种: 查找节点。 创建节点。 插入节点。 替换节点。 复制节点。 删除节点。 一、查找节点 示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19......
    03-11
  • JavaScript的事件监听你了解吗

    JavaScript的事件监听你了解吗

    1.什么是事件监听 ? 事件监听就是计算机对事件进行监听,知道什么时候发生了这个事件,从而执行一些写好的程序。 那么,它的常用方法有哪些呢 ?让我们一起来看看......
    03-08
  • Javascript的原型和原型链你了解吗

    Javascript的原型和原型链你了解吗

    一、为什么要使用原型?怎样去理解原型的出现 1、对象字面量创建对象的缺点 想要介绍原型,就不得不提为什么我们要使用原型,在js早期,我们创建一个对象,比较流......
    03-03