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

    2018-08-10 13:06:36
    微信小程序实现map组件 微信开发者工具 微信小程序实现map组件 微信开发者工具
  • 主要给大家介绍了关于微信小程序map组件z-index的层级问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 小程序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        
    	        })
    	      }
    	    })
    	  }
    

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

    展开全文
  • 微信小程序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中cover-view文本换行

    千次阅读 2019-04-29 15:47:24
    小程序map中使用cover-view,添加了word-break:break-all等属性以后还是不换行的问题 经测试,添加以下样式即可换行 .wrap{ word-break: break-all; word-wrap:break-word; white-space:pre-line; } ...

    在小程序map中使用cover-view,添加了word-break:break-all等属性以后还是不换行的问题

    经测试,添加以下样式即可换行

    .wrap{
      word-break: break-all;
      word-wrap:break-word;
      white-space:pre-line;
    }
    
    展开全文
  • 微信小程序 map地图

    千次阅读 2018-09-24 17:26:28
    接下来博主将会为大家给讲解微信小程序map地图相关的东西,最后附上源码 以下是微信小程序项目源码:点击可以进入gitee直接下载源码包喔 微信小程序演示程序 版权所有,禁止转载,违者必究。 喜欢的朋友可以...

    接下来博主将会为大家给讲解微信小程序,map地图相关的东西,最后附上源码

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    以下是微信小程序项目源码:点击可以进入gitee直接下载源码包喔
    微信小程序演示程序

    版权所有,禁止转载,违者必究。
    喜欢的朋友可以点赞评论喔,您的支持是我更新最大的动力~

    展开全文
  • 微信小程序map地图点击标记获取用户全部下信息 首先可以先去了解一下微信开发文档map怎么获取点击用户https://developers.weixin.qq.com/miniprogram/dev/component/map.html .wxml <map id="map" bindmarkertap=...
  • 小程序Map上边增加控件之坑

    千次阅读 2018-12-09 00:40:41
    小程序Map做的很基础,功能不完善,由于Map置于最顶层,所以就得用到cover-view来做上层组件,但位置一定要注意,用下方方式写在开发工具上预览正常,但在真机上就失效。 &lt;cover-view style='position:...
  • 组件需要设置ID,虽然小程序map组件不是强制要填,但不填可能会有一些问题 2、marker 一定要有id,这个id一定是有效的,不能为空。这个是最重要的 3、设一下marker的层级,Zindex 以上就是我整理的《微信...
  • 案例:可访问本人github地址(功能完善中…) 使用腾讯地图SDK ; 目前已有功能:搜索,地址列表,pio点,出行方式,路线… 微信小程序map组件-腾讯地图SDK ...
  • 小程序map 组件的时候发现一个问题,map 地图组件是全屏显示的,但是我想在map 组件上在显示几个其他的功能按钮,却发现无论怎么操作在真机上也不能显示出来, 微信开发者工具中一点问题没有,恶心了
  • 今天在写小程序详情页时候遇到一个坑,微信小程序map组件的markers属性是通过后端异步请求到数据后设置的,结果就导致了微信底层渲染出错。 但是如果我先在data向如下初始化markers变量,却可以渲染。 但是我们...
  • 小程序map组件的使用

    千次阅读 2019-05-20 17:17:24
    做项目的过程中需要根据某一个坐标获取这个坐标附近的门店,使用到了map组件: 首先在选择门店的时候: 点击请选择安装门店,进入address.wxml文件中: address.js文件这样写: 首先在onReady(){}里面获取map上下文...
  • 微信小程序map自定义组件实现

    千次阅读 2020-10-16 11:24:59
    效果     ... 图片   ... 鼠标放在图片上可以看到使用... id="map" setting="{{setting}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 100%;"><
  • 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地图 多点标记

    千次阅读 2019-08-20 16:44:25
    实际项目中的操作 data:{ markers: [], }, onLoad: function(options) { wx.request({ url: “这里是接口地址”, data: { //传入的参数 longitude: app.globalData.longitude, latitude: app.glo...
  • 微信小程序map组件之移动map选取位置,效果图如下: 手机效果相同。 废话不多说,上代码 wxml代码: &amp;amp;amp;lt;view class=&amp;amp;quot;container&amp;amp;quot;&amp;amp;amp;gt; &...
  • 在使用map进行定位时,发现定位点不在视图的中心。如下图情况; 解决方式: 将type改为gcj02,完美解决“定位点不在视图中心的问题”。
  • 微信小程序map组件z-index的层级问题

    千次阅读 2019-01-04 11:57:12
    嗷呦呦 说起微信小程序map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦, 但是在实际小程序的试用过程中还是存在点问题的。 如下情景: 刚开始接入map组件的时候是在微信开发工具的模拟器...
  • 从我自己开发的微信小程序中提取的一个简单demo,代码很简单,主要是通过map组件和相关api及sdk完成的功能,能够进行定位,和检索周边,真机测试可行
  • 微信小程序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实现 浮标、定位

    千次阅读 2019-11-29 13:58:35
    就是地图上不随地图移动的图标,直接在map标签外设置cover-view,里面包裹cover-image,样式使用绝对定位即可。比如地图缩小按钮标签显示在地图右上角: wxml <!-- 缩小 --> <view class='cover-smaller'&...
  • 小程序map实现 marker、导航

    千次阅读 2019-11-29 16:32:53
    map class="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" include-points="{{markers}}" bindmarkertap="clickMarker" wx:if="{{true}}" show-location><...
  • 小程序map地图上显示多个marker

    万次阅读 2018-08-15 17:34:00
    map id="myMap" style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-...
  • 微信小程序官方文档 学校部分快递点(中通,百世…)位于校外,所以找寻比较困难 微信小程序+定位解决这个问题特别合适 // map.wxml <map id="mapp" latitude="37.488" longitude="121.4499" scale="16" show-...
  • 在微信小程序当中,实现简易的、没有很多复杂功能的地图,可以选用小程序的原生map组件。 WXML如下: &lt;map id="mymap" longitude="{{longitude}}" latitude="{{latitude}}"...
  • 微信小程序 ...在微信小程序中video、map、canvas等组件的层级都最高的 但是,同样的有一个视图容器可以覆盖在这些“顶级”组件之上的 Video 在video之上添加覆盖物 &lt;video src="...
  • 微信小程序 Map的简单使用

    千次阅读 2018-08-06 15:50:40
    map.wxml &lt;view&gt; &lt;map class='map' latitude='{{latitude}}' longitude='{{longitude}}' scale='{{scale}}' markers='{{markers}}'/&gt; &lt;/view&gt; map.wxss .map{ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 454,910
精华内容 181,964
关键字:

小程序map