微信小程序地图(map)组件点击(tap)获取经纬度的方法
作者:舍瓦温 时间:2023-09-03 21:33:37
微信小程序中使用地图(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()
}
})
效果如图
来源:https://segmentfault.com/a/1190000017821849
标签:小程序,经纬度
0
投稿
猜你喜欢
浅谈用Go构建不可变的数据结构的方法
2024-04-26 17:36:27
破解空间实现域名绑定到子目录方法
2010-03-14 11:29:00
对Python 中矩阵或者数组相减的法则详解
2024-01-02 01:29:17
JavaScript中实现块作用域的方法
2024-04-16 10:38:39
Python中Pyenv virtualenv插件的使用
2021-10-25 08:07:19
DreamweaverMX 2004打造细线表格
2008-10-01 09:39:00
Python恋爱小助手之必拿下
2023-09-22 13:09:00
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2022-10-02 10:28:38
重新认识视觉设计
2009-09-08 12:46:00
asp函数InstrRev()介绍及获取文件名例子
2007-11-19 19:01:00
Python实现将MongoDB中的数据导入到MySQL
2024-01-21 04:41:01
Python标准库之Math,Random模块使用详解
2021-02-09 22:33:13
使用matplotlib绘制图例标签中带有公式的图
2022-07-19 00:40:48
利用Python实现定时程序的方法
2021-04-16 08:28:04
Django中更新多个对象数据与删除对象的方法
2021-08-13 13:31:46
使用JS的DOM文档对象模型获取前端循环的参数
2024-04-10 13:54:46
MySQL从库维护经验分享
2024-01-26 22:31:18
ElementUI的this.$notify.close()调用不起作用的解决
2024-05-09 09:53:16
Vue实现登录以及登出详解
2023-07-02 16:59:51
玩转python爬虫之爬取糗事百科段子
2022-09-23 12:20:52