酷站(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(#换@) 举报,一经查实,本站将立刻删除。
原文链接:

相关文章

  • javascript实现点击图片切换

    javascript实现点击图片切换

    击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。 HTML代码如下: div class=img img src=images/1.jpg id=myImg class=myImg alt=这里是1.jpg p input type=button id=pre class=btn value=上一张 inpu......
    04-05
  • Vue+node实现音频录制播放功能的代码

    Vue+node实现音频录制播放功能的代码

    实现效果: 主要实现代码逻辑部分,具体页面结构就不一一介绍了。 vue部分: 安装recorderx cnpm install recorderx --save 或者 npm install recorderx --save 在具体的组件中引入 script import axios from axios; import { Toast } fr......
    03-25
  • JavaScript实现鼠标拖拽调整div大小的代码

    JavaScript实现鼠标拖拽调整div大小的代码

    实现思路: 根据鼠标位置改变鼠标样式 当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改 当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的移动修改div的尺寸 鼠标松开时结束尺寸修改 代码实现: !DOCTY......
    03-07
  • JavaScript实现H5接金币功能的代码

    JavaScript实现H5接金币功能的代码

    今日做出做出一个春节接金币红包的活动,感觉挺不错的分享给大家 这个小游戏采用hilojs实现的, 详情 第一步:安装插件 npm i hilojs或者yarn add hilojs 第二步:创建一个Asset.js文件 import Hilo from hilojs;export default Hilo.Cla......
    02-23
  • js实现验证码干扰(静态)

    js实现验证码干扰(静态)

    效果 代码 !DOCTYPE htmlhtml head meta charset=UTF-8 title/title style *{ padding: 0; margin: 0; } canvas{ background: #272822; } /style /head body canvas id=canvas width=800 height=500/canvas script //获得画板 var canvas......
    02-23
  • 详解vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    详解vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周......
    02-12
  • uniapp微信小程序:key失效的解决方法介绍

    uniapp微信小程序:key失效的解决方法介绍

    uniapp 代码 template view image v-for=(item, i) in fileList :key=item[urlKey] :src=item[urlKey]/image /view/templatescript export default { props: { urlKey: {default: url}, fileList: Array } }/script 编译到 微信小程序 vi......
    01-21
  • 原生js实现自定义滚动条的实例教程

    原生js实现自定义滚动条的实例教程

    1.HTML文件 div1是滚动条,div2是滚动小球,div3是文本区域容器,div4是文本区域。 div id=div div id=div1 div id=div2 /div /div div id=div3 div id=div4 pCSS3 教程/p pCSS3 教程/p pCSS3 简介/p pCSS3 边框/p pCSS3 圆角/p pCSS3 背......
    01-21
  • Vue开发人员的7个最好的VSCode扩展的介绍

    Vue开发人员的7个最好的VSCode扩展的介绍

    在Visual Studio中添加正确的VS Code扩展可以让你作为开发者的生活变得更加轻松。 它们可以帮助格式化、可伸缩性、强制执行最佳实践,从而自动化开发过程中许多容易忘记的任务。它们也可以只是有趣的扩展,使我们的代码看起来更漂亮/更容......
    01-20
  • vue element el-transfer增加拖拽功能的实现

    vue element el-transfer增加拖拽功能的实现

    芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能;原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs 首先安装 1 sudo npm i sortablejs --save-dev html代码 1 2 3 4 5 template el-transfer ref = transfer id ......
    01-15

最新更新