微信小程序自带地图_微信小程序API 地图组件控制
wx.createMapContext(mapId)
创建并返回 map 上下文 mapContext 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 组件
mapContext
mapContext通过 mapId 跟一个组件绑定,通过它可以操作对应的组件。
mapContext 对象的方法列表方法参数说明最低版本getCenterLocationOBJECT获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于 wx.openLocation
moveToLocation无将地图中心移动到当前定位点,需要配合map组件的show-location使用
translateMarkerOBJECT平移marker,带动画
includePointsOBJECT缩放视野展示所有经纬度
getRegionOBJECT获取当前地图的视野范围
getScaleOBJECT获取当前地图的缩放级别
getCenterLocation 的 OBJECT 参数列表参数类型必填说明successFunction否接口调用成功的回调函数 ,res = { longitude: "经度", latitude: "纬度"}
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
translateMarker 的 OBJECT 参数列表参数类型必填说明markerIdNumber是指定marker
destinationObject是指定marker移动到的目标点
autoRotateBoolean是移动过程中是否自动旋转marker
rotateNumber是marker的旋转角度
durationNumber否动画持续时长,默认值1000ms,平移与旋转分别计算
animationEndFunction否动画结束回调函数
failFunction否接口调用失败的回调函数
includePoints 的 OBJECT 参数列表参数类型必填说明pointsArray是要显示在可视区域内的坐标点列表,[{latitude, longitude}]
paddingArray否坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为[上,右,下,左],安卓上只能识别数组第一项,上下左右的padding一致。开发者工具暂不支持padding参数。
getRegion 的 OBJECT 参数列表参数类型必填说明successFunction否接口调用成功的回调函数,res = {southwest, northeast},西南角与东北角的经纬度
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
getScale 的 OBJECT 参数列表参数类型必填说明successFunction否接口调用成功的回调函数,res = {scale}
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
示例代码:
获取位置
移动位置
移动标注
缩放视野展示所有经纬度// map.js
Page({
onReady: function (e) {
// 使用 wx.createMapContext 获取 map 上下文
this.mapCtx = wx.createMapContext('myMap')
},
getCenterLocation: function () {
this.mapCtx.getCenterLocation({
success: function(res){
console.log(res.longitude)
console.log(res.latitude)
}
})
},
moveToLocation: function () {
this.mapCtx.moveToLocation()
},
translateMarker: function() {
this.mapCtx.translateMarker({
markerId: 0,
autoRotate: true,
duration: 1000,
destination: {
latitude:23.10229,
longitude:113.3345211,
},
animationEnd() {
console.log('animation end')
}
})
},
includePoints: function() {
this.mapCtx.includePoints({
padding: [10],
points: [{
latitude:23.10229,
longitude:113.3345211,
}, {
latitude:23.00229,
longitude:113.3345211,
}]
})
}
})
微信小程序自带地图_微信小程序API 地图组件控制相关推荐
- 微信小程序获取带表情的微信名乱码问题
微信小程序获取带表情的微信名乱码问题 在后台获取完微信用户数据后,对微信名进行UTF-8编码 URLEncoder.encode(nickName, "utf-8") ,将编码后的 ...
- uniapp —— 小程序实现带参分享微信、朋友圈以及调试获取参数
uniapp -- 小程序实现带参分享微信.朋友圈以及调试获取参数 零.起因以及分类 小程序 我们在开发微信小程序的过程中,经常需要实现分享给微信用户或者分享到微信朋友圈的功能,基本上我们会用到 on ...
- 微信小程序自带地图_微信小程序开发之之地图功能(map)
本文将带你了解微信小程序开发之之地图功能(map),希望本文对大家学微信有所帮助. 主要介绍微信小程序中的地图模块相关功能.基本使用地图组件使用起来也很简单..wxml 1212参数列表及说明如下:除 ...
- 微信小程序自带地图_微信小程序地图上选择位置
实现效果 很多小程序都有如下需求: 小程序打开后,以文字形式显示用户所在位置,如果用户觉得不准,可以打开地图,在地图上自己选择位置,选择完成后,显示的用户的位置会发生变化 点击地址选择地点 选择地点之 ...
- 高德地图小程序步行路线显示_微信小程序 高德地图路线规划实现过程详解
前言 最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图 百度坐标 (BD-09) 腾讯地图 火星坐标(GCJ-02) 高德地图 火星坐标 ...
- 高德地图小程序步行路线显示_微信小程序----map路线规划
声明 bug: 页面脚的步行.骑行.驾车区域在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图 ...
- 高德地图小程序步行路线显示_微信小程序之:小程序接入高德地图SDK
前言 最近在捣腾小程序,想开发一个自己的小程序,过一把独立开发的瘾. 自己设计,自己搞数据,自己找图标,自己决定要或者不要什么功能,完全跟着心走,目前体验下来,感觉还是蛮爽的.比在公司产品要你做什么你 ...
- 不同程序用不同网络_微信小程序直播登场,与平台直播有何不同?
星标我,不要迷路哦~ 微信小程序直播开启公测了.在直播这个流量阵地里,每一个科技巨头,每一个零售商家,甚至是每一个个体,都渴望借助直播获得新的机遇. 1月中旬,不少商家收到小程序直播的公测邀请,并已交 ...
- 程序左上角的字_微信内测7.0.7新版本,小程序迎来大改动!
最近几个月来,微信就跟打了鸡血一样不断更新了多个版本上线多个新功能.此前7月末,微信安卓7.0.6带来了将收藏笔记,文件预览等页面设为浮窗的功能,目前最多支持5个文档或笔记设为浮窗.这不,距离微信7. ...
- 企业微信小程序可用存储空间不足_微信小程序为什么能帮助企业商家引流?
点击蓝字 关注我们 微信小程序,腾讯公司于2017年推出的一款手机应用.自小程序诞生以来,各行各业都有不少企业和商家开发了自己的小程序,并通过小程序为自己吸引了巨大的流量.那么,小程序为什么能帮助企业 ...
最新文章
- VC串口通信编程-2
- linux哪些分区用固态硬盘,关于linux:简单聊聊固态硬盘的物理结构
- TrojanDownloader简单分析
- Mysql读写分离php脚本
- mysql group 条件,mysql - mysql group by,两个条件,限制1 - SO中文参考 - www.soinside.com...
- 如何在Spring Boot应用程序中使用配置文件
- 解决正在等待响应_解决一些等待问题
- js动态生成按钮,页面用DIV简单布局2
- linux中awk命令_Linux / Unix中的AWK命令
- offline tablespace的几种方法
- IOS发布应用照片大小
- 对+=赋值运算符的认识
- 后端要学MySQL_后端程序员需要掌握MySQL数据库吗
- Java多线程面试题,我丝毫不慌
- ​【预测模型】基于粒子群算法优化最小二乘支持向量机实现数据分类matlab代码
- python输入年份判断生肖_python年份判断生肖
- 守护线程setDaemon的理解
- 【课程设计|C++】设计一个哈夫曼编码器/译码器设计
- C++面试题总结,一篇就够了
- 转行程序员日记---2020-10-19【开始加班了】