郑州微信小程序开发_微信小程序地图(map)组件点

发布时间:2021-01-08 10:36 作者:jianzhan

摘要: 手机微信微信小程序地形图(map)部件点一下(tap)获得经伟度的方式 本文关键详细介绍了手机微信微信小程序地形图(map)部件点一下(tap)获得经伟度的方式,网编感觉挺好的,如今共享

微信小程序地图(map)组件点击(tap)获取经纬度的方法       这篇文章主要介绍了微信小程序地图(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 /map

const app = getApp()
const markersize = 30
function range(start, edge, step) {
 for (var ret = [];
 (edge - start) * step 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()
})

效果如图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


  • 微信公众号吸粉新游戏玩

    不知道道大伙儿有木有发觉,近期许多微信公众号竞相关系了微信小程序。除开追上微信小程序风潮外,实际上里边有很大的文章内容。 特别是在针对有产品市场销售的微信公众号来讲

  • 官方网讲解:九大通道,

    肺部感染肺炎疫情当中,消費者消費转到在网上。以美妆皮肤医护、美容护肤肌肤护理美容护肤、餐饮店外卖送餐送餐为寓意着的生活起居服务类商家越来越越越高宽比高度重视知名品

  • 手机微信微信小程序开发

    原题目:手机微信微信小程序开发设计自然环境构建 手机微信微信小程序可以说是近期最红的一个名词了,一经出現简直空袭了全部开发设计工作人员,自然许多App开发设计工作人员拥

  • 零售业更聪慧,微信小程

    近几年来,零售商的“数据信息化”、“聪明伶俐化”被作为是关乎企业生死存亡的血战局。在这其中的逻辑性性十分好啦解:转型发展裹挟着从业者的焦虑情绪心态而成,技术性性的

  • 如何把小程序用户导流到

    因为手机微信微信小程序即用即走的特点,商家依据手机微信微信小程序无法给消费者提供有溫度的管家式服务。那么大伙儿把手机微信微信小程序顾客恰当正确引导到企业手机上手机