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

    2018-08-10 13:06:36
    微信小程序实现map组件 微信开发者工具 微信小程序实现map组件 微信开发者工具
  • 主要给大家介绍了关于微信小程序map组件z-index的层级问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下
  • 微信小程序Map组件全屏显示 本人今天遇到了这个问题 想要小程序Map组件全屏显示设置css样式height:100%;是不生效得 需要用单位vh 设置css样式为height:100vh;就可以了 仅供参考哦 ...

    微信小程序Map组件全屏显示
    本人今天遇到了这个问题
    想要小程序Map组件全屏显示设置css样式height:100%;是不生效得
    需要用单位vh
    设置css样式为height:100vh;就可以了
    仅供参考哦

    展开全文
  • 微信小程序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;
    					}
    				});
    			},
    
    展开全文
  • 使用wepy框架,请求回来的数据设置给data里面初始化的markers,使用wx:if在拿到数据后渲染map组件,模拟器上没问题,真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片...
  • 使用微信小程序中的map组件和相机组件进行结合以实现AR效果的一次尝试,当然微信还未入局AR,这次尝试也以失败告终,欢迎有想法的同学一起交流学习!
  • 案例:可访问本人github地址(功能完善中…) 使用腾讯地图SDK ; 目前已有功能:搜索,地址列表,pio点,出行方式,路线… 微信小程序map组件-腾讯地图SDK ...

    腾讯地图WebService API 是基于HTTPS/HTTP协议的数据接口,开发者可以使用任何客户端、服务器和开发语言,按照腾讯地图WebService API规范,按需构建HTTPS请求,并获取结果数据(目前支持JSON/JSONP方式返回)。
    可以在小程序中调用腾讯位置服务的POI检索关键词输入提示地址解析逆地址解析出行方式行政区划距离时间计算等数据服务。

    微信小程序-地图map组件(功能持续完善ing…)
    使用腾讯地图SDK ; 目前已有功能:搜索,关键字,地址列表,pio点,出行方式,规划路线,具体路线信息,城市选择…
    腾讯地图官方sdk文档https://lbs.qq.com/qqmap_wx_jssdk/index.html
    参看以上地址,请自行按步骤配置环境…

    我已完成的功能:
    功能1:搜索[关键字,分类];
    功能2:出行方式[驾车,步行,骑行,公交];
    功能3:规划的出行路线[到标记的点];
    功能4:poi点[地图上可见的建筑点];
    功能5:搜索出的地址列表[地址名,路程距离,花费时间等];
    功能6:具体行走的路线信息的过程(这个有点复杂-注意看文档);
    功能7:城市的选择 注意看文档
    省市区可以参考本人此案例:https://blog.csdn.net/weixin_42211816/article/details/89958758

    地图默认情况
    关键字搜索
    关键字分类、地址列表
    pio点

    具体行走的路线信息的过程
    城市选择
    ~~杜绝抄袭发布与商业用途,仅供学习使用,谢谢!!!

    有什么错误或优化的地方,可以提出来,大家一起学习研究…
    在这里插入图片描述

    展开全文
  • 今天做小程序遇到了map组件上任何事件都不起作用,无法执行函数。 贴出可能解决的办法: 1、<map> 组件需要设置ID,虽然小程序map组件不是强制要...以上就是我整理的《微信小程序map组件bindmarkertap事件点...

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

    贴出可能解决的办法:

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

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

    3、设一下marker的层级,Zindex

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

     

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

     

     
     

     

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

    展开全文
  • 今天在写小程序详情页时候遇到一个坑,微信小程序map组件的markers属性是通过后端异步请求到数据后设置的,结果就导致了微信底层渲染出错。 但是如果我先在data向如下初始化markers变量,却可以渲染。 但是我们...
  • 从我自己开发的微信小程序中提取的一个简单demo,代码很简单,主要是通过map组件和相关api及sdk完成的功能,能够进行定位,和检索周边,真机测试可行
  • 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组件开发时遇到了一个问题,应该是官网的bug,就是当添加marker标签后同时给地图
  • 微信小程序map组件z-index的层级问题

    千次阅读 2019-01-04 11:57:12
    嗷呦呦 说起微信小程序map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦, 但是在实际小程序的试用过程中还是存在点问题的。 如下情景: 刚开始接入map组件的时候是在微信开发工具的模拟器...
  • 微信小程序map组件之移动map选取位置,效果图如下: 手机效果相同。 废话不多说,上代码 wxml代码: &amp;amp;amp;lt;view class=&amp;amp;quot;container&amp;amp;quot;&amp;amp;amp;gt; &...
  • // 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组件点聚合初次使用的坑

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

    千次阅读 2019-05-16 15:28:21
    最近在开发一个租车小程序,着实被原生组件Map折磨的很惨。 今天说的是在地图上实现一个input输入框。 Map组件微信的最高层级原生组件,具有最高优先级无视z-index,其他最高层级原生组件包括video、canvas、...
  • 最近,在做一个土地划块的微信小程序,需要使用map组件。根据业务需求,需要在map上弹出一个模态框。由于map组件是原生组件,层级最高。导致模态框被覆盖在map组件下面。百度了很多,都说使用cover-view解决。但是我...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,709
精华内容 4,683
关键字:

微信小程序map组件

微信小程序 订阅