微信小程序中使用地图(map)组件，通过点击(tap)获取经纬度，按照官方的回应，暂时是没法做到的，从地图组件API多有残缺判断，怀疑是个实习生干的...
主要从事网页设计、PC网站建设（电脑版网站建设）、wap网站建设（手机版网站建设）、响应式网站、程序开发、微网站、微信小程序等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了丰富的网站建设、做网站、网络营销经验，集策划、开发、设计、营销、管理等多方位专业化运作于一体，具备承接不同规模与类型的建设项目的能力。
做个变通，适用性有限，请大家参考。基本思路就是在地图上铺满一层marker，从而通过点击marker获得经纬度。
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()
}
})效果如图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
