精华内容
下载资源
问答
  • 微信小程序map组件

    2018-08-10 13:06:36
    微信小程序实现map组件 微信开发者工具 微信小程序实现map组件 微信开发者工具
  • 主要给大家介绍了关于微信小程序map组件z-index的层级问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下
  • 小程序map组件的show-location

    千次阅读 2018-10-08 15:04:56
    小程序map组件的show-location 关于小程序map组件的show-location属性想必使用过map组件的人都知道,map组件的show-location的属性值不管true还是false都不会显示在地图上,其实在show-location为true的时候是会显示...

    小程序map组件的show-location

    关于小程序map组件的show-location属性想必使用过map组件的人都知道,map组件的show-location的属性值不管true还是false都不会显示在地图上,其实在show-location为true的时候是会显示的,只是因为map组件的scale的原因,地图显示不出来,所以我们需要用到用的微信自带的api来曲线完成显示我们的当前位置。代码如下
    html:

    <map id='myMap' longitude="{{longitude}}" latitude="{{latitude}}" show-location scale="18"></map>
    

    js:

    onReady:function(){
    	    this.mapCtx = wx.createMapContext('myMap')
    	  this.getCenterLocation();
    	  },
    	  getCenterLocation: function () {
    	    var that = this
    	    wx.getLocation({
    	      type: "wgs84",
    	      success: function (res) { 
    	        that.setData({
    	          latitude: res.latitude,
    	          longitude: res.longitude        
    	        })
    	      }
    	    })
    	  }
    

    因需求不一样,所以代码会不同,本人小菜鸟一只,望多指教

    展开全文
  • 使用wepy框架,请求回来的数据设置给data里面初始化的markers,使用wx:if在拿到数据后渲染map组件,模拟器上没问题,真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片...
  • 微信小程序map组件拖拽地图中心点固定 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2 原生组件 <map id="map4select" :style="{height: mapHeight+'px' , width: mapWidth +'px'}" :latitude=...

    微信小程序map组件拖拽地图中心点固定

    下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2

    原生组件

    <map id="map4select" :style="{height: mapHeight+'px' , width: mapWidth +'px'}" :latitude="latitude" :longitude="longitude"
     scale="14" show-location :markers="covers" @tap="mapTap" @regionchange="regionchange"></map>
    

    引入SDK核心类

    var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
    var qqmapsdk;
    Page({
     
        onLoad: function () {
            // 实例化API核心类
            qqmapsdk = new QQMapWX({
                key: '申请的key'
            });
        },
        onShow: function () {
            // 调用接口
            qqmapsdk.search({
                keyword: '酒店',
                success: function (res) {
                    console.log(res);
                },
                fail: function (res) {
                    console.log(res);
                },
            complete: function (res) {
                console.log(res);
            }
        });
     
     
    })
    

    获取当前位置

    uni.getLocation({
    	type: 'wgs84',
    	success(res) {
    		console.log(res)
    		let latitudes, longitudes;
    		latitudes = res.latitude;
    		longitudes = res.longitude;
    		_this.latitude = latitudes;
    		_this.longitude = longitudes;
    		_this.covers[0].longitude = longitudes;
    		_this.covers[0].latitude = latitudes;
    		// 地址解析
    		qqmapsdk.reverseGeocoder({
    			location: {
    				latitude: latitudes,
    				longitude: longitudes
    			},
    			success: function(re) {
    				console.log(re);
    				_this.locationAddre = re.result.formatted_addresses.recommend+'-'+re.result.address;
    			}
    		});
    	}
    })
    

    地图变化,获取中间点

    regionchange(e) {
    				// 地图发生变化的时候,获取中间点,也就是用户选择的位置toFixed
    				if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
    					// console.log(e)
    					this.mapCtx = uni.createMapContext("map4select");
    					this.mapCtx.getCenterLocation({
    						type: 'gcj02',
    						success: function(res) {
    							// console.log(res)
    							let latitudes, longitudes;
    							latitudes = res.latitude;
    							longitudes = res.longitude;
    							_this.latitude = latitudes;
    							_this.longitude = longitudes;
    							_this.covers[0].longitude = longitudes;
    							_this.covers[0].latitude = latitudes;
    							// 地址解析
    							qqmapsdk.reverseGeocoder({
    								location: {
    									latitude: latitudes,
    									longitude: longitudes
    								},
    								success: function(re) {
    									console.log(re);
    									_this.locationAddre = re.result.formatted_addresses.recommend+'-'+re.result.address;
    								}
    							});
    						}
    					})
    				}
    			},
    

    地址解析

    addressResolution(latitudes,longitudes){
    				qqmapsdk.reverseGeocoder({
    					location: {
    						latitude: latitudes,
    						longitude: longitudes
    					},
    					success: function(re) {
    						console.log(re);
    						_this.locationAddre = re.result.formatted_addresses.recommend+'-'+re.result.address;
    					}
    				});
    			},
    
    展开全文
  • 使用微信小程序中的map组件和相机组件进行结合以实现AR效果的一次尝试,当然微信还未入局AR,这次尝试也以失败告终,欢迎有想法的同学一起交流学习!
  • 组件需要设置ID,虽然小程序map组件不是强制要填,但不填可能会有一些问题 2、marker 一定要有id,这个id一定是有效的,不能为空。这个是最重要的 3、设一下marker的层级,Zindex 以上就是我整理的《微信...

    今天做小程序遇到了map组件上任何事件都不起作用,无法执行函数。

    贴出可能解决的办法:

    1、<map> 组件需要设置ID,虽然小程序map组件不是强制要填,但不填可能会有一些问题

    2、marker 一定要有id,这个id一定是有效的,不能为空。这个是最重要的

    3、设一下marker的层级,Zindex

    以上就是我整理的《微信小程序map组件bindmarkertap事件点击无效》可能的解决办法

     

    文章由本人亲自整理,绝对原创,转载请说明。如有问题也请大家多多包涵

     

     
     

     

    转载于:https://www.cnblogs.com/sifo/p/10154988.html

    展开全文
  • 小程序map 组件的时候发现一个问题,map 地图组件是全屏显示的,但是我想在map 组件上在显示几个其他的功能按钮,却发现无论怎么操作在真机上也不能显示出来, 微信开发者工具中一点问题没有,恶心了

    搞小程序map 组件的时候发现一个问题,map 地图组件是全屏显示的,但是我想在map 组件上在显示几个其他的功能按钮,却发现无论怎么操作在真机上也不能显示出来, 微信开发者工具中一点问题没有,恶心了??
    后来查找官方文档发现一个 cover-view 标签。
    文档上是这样写的:
    cover-view
    覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image,可在cover-view中使用button。

    因为原生组件 在小程序中的层级是最高的,所以其他的元素无论怎么定位设置层级都无法显示。
    没想到吧,竟然有这种骚操作,坑蒙了我!
    附官方文档连接: https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
    原生组件使用限制说明: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#原生组件的使用限制
    查看具体使用方法

    展开全文
  • 案例:可访问本人github地址(功能完善中…) 使用腾讯地图SDK ; 目前已有功能:搜索,地址列表,pio点,出行方式,路线… 微信小程序map组件-腾讯地图SDK ...
  • 小程序map组件的使用

    千次阅读 2019-05-20 17:17:24
    做项目的过程中需要根据某一个坐标获取这个坐标附近的门店,使用到了map组件: 首先在选择门店的时候: 点击请选择安装门店,进入address.wxml文件中: address.js文件这样写: 首先在onReady(){}里面获取map上下文...
  • 小程序Map组件markers问题,反复查看发现是单个maker的经纬度写反了
  • 今天在写小程序详情页时候遇到一个坑,微信小程序map组件的markers属性是通过后端异步请求到数据后设置的,结果就导致了微信底层渲染出错。 但是如果我先在data向如下初始化markers变量,却可以渲染。 但是我们...
  • map id=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;map&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; latitude=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;{{latitude}
  • 微信小程序map组件z-index的层级问题

    千次阅读 2019-01-04 11:57:12
    嗷呦呦 说起微信小程序map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦, 但是在实际小程序的试用过程中还是存在点问题的。 如下情景: 刚开始接入map组件的时候是在微信开发工具的模拟器...
  • 从我自己开发的微信小程序中提取的一个简单demo,代码很简单,主要是通过map组件和相关api及sdk完成的功能,能够进行定位,和检索周边,真机测试可行
  • 微信小程序map组件之移动map选取位置,效果图如下: 手机效果相同。 废话不多说,上代码 wxml代码: &amp;amp;amp;lt;view class=&amp;amp;quot;container&amp;amp;quot;&amp;amp;amp;gt; &...
  • 在使用微信小程序使用map组件开发时遇到了一个问题,应该是官网的bug,就是当添加marker标签后同时给地图
  • 微信小程序map组件点聚合初次使用的坑

    千次阅读 热门讨论 2020-11-10 10:24:18
    有个项目一直有个功能,地图上标注车站,但是点过多时需要点聚合功能,map组件和腾讯地图小程序端并不能实现这个功能,除了webview,好像没有别的办法。终于9月份官方更新了聚合功能,,, 看文档使用方法很简单,,...
  • 小程序map组件添加input等form表单

    千次阅读 2019-01-08 17:53:13
    如果帮到你的话别忘了...因为现在小程序的map、video、canvas、camera···等组件的层级非常高,而且cover-view还不支持内嵌input等form表单元素,所以就做了个取巧的方案 延伸 虽然这个只是针对map组件写的demo...
  • // map.wxml <map id="mapp" latitude="37.4857" longitude="121.4468" scale="15" show-compass="true"show-scale="true" markers="{{markers}}" polyline="{{polyline}}"> </map> // ma...
  • 在使用map组件时,经纬度属性(latitude,longitude)使用数据绑定,在onLoad里获取用户的地理位置,然后再setData,这时往往map组件拿不到获取的值。 原因: map组件的组件渲染是优先于接口setData的异步赋值的,导致...
  • 使用小程序组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是微信小程序map、video、canvas、camera等组件都是原生组件,...
  • 微信小程序map组件层级之上实现input

    千次阅读 2019-05-16 15:28:21
    最近在开发一个租车小程序,着实被原生组件Map折磨的很惨。 今天说的是在地图上实现一个input输入框。 Map组件时微信的最高层级原生组件,具有最高优先级无视z-index,其他最高层级原生组件包括video、canvas、...
  • 最近在公司需要做新小程序的项目,其中有个需求类似滴滴打车的路线规划,实现的第一步就遇到点小问题。发现markers写在data中是可以展示出来的,但是从后台获取数据的后那个markers就不显示了 出现该现象的原因:...
  • 最近,在做一个土地划块的微信小程序,需要使用map组件。根据业务需求,需要在map上弹出一个模态框。由于map组件是原生组件,层级最高。导致模态框被覆盖在map组件下面。百度了很多,都说使用cover-view解决。但是我...
  • 之前做过一个要map组件小程序,要实现路线规划。通过点击不同的marker,规划处一条路径来,初始位置是用户的位置,终点由服务提供。然而现在出现了无法显示用户位置外markers的情况。 简化后代码片段 js代码: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 110,411
精华内容 44,164
关键字:

小程序map组件