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 地图组件控制相关推荐

  1. 微信小程序获取带表情的微信名乱码问题

    微信小程序获取带表情的微信名乱码问题 在后台获取完微信用户数据后,对微信名进行UTF-8编码 URLEncoder.encode(nickName, "utf-8") ,将编码后的 ...

  2. uniapp —— 小程序实现带参分享微信、朋友圈以及调试获取参数

    uniapp -- 小程序实现带参分享微信.朋友圈以及调试获取参数 零.起因以及分类 小程序 我们在开发微信小程序的过程中,经常需要实现分享给微信用户或者分享到微信朋友圈的功能,基本上我们会用到 on ...

  3. 微信小程序自带地图_微信小程序开发之之地图功能(map)

    本文将带你了解微信小程序开发之之地图功能(map),希望本文对大家学微信有所帮助. 主要介绍微信小程序中的地图模块相关功能.基本使用地图组件使用起来也很简单..wxml 1212参数列表及说明如下:除 ...

  4. 微信小程序自带地图_微信小程序地图上选择位置

    实现效果 很多小程序都有如下需求: 小程序打开后,以文字形式显示用户所在位置,如果用户觉得不准,可以打开地图,在地图上自己选择位置,选择完成后,显示的用户的位置会发生变化 点击地址选择地点 选择地点之 ...

  5. 高德地图小程序步行路线显示_微信小程序 高德地图路线规划实现过程详解

    前言 最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图 百度坐标 (BD-09) 腾讯地图 火星坐标(GCJ-02) 高德地图 火星坐标 ...

  6. 高德地图小程序步行路线显示_微信小程序----map路线规划

    声明 bug: 页面脚的步行.骑行.驾车区域在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图 ...

  7. 高德地图小程序步行路线显示_微信小程序之:小程序接入高德地图SDK

    前言 最近在捣腾小程序,想开发一个自己的小程序,过一把独立开发的瘾. 自己设计,自己搞数据,自己找图标,自己决定要或者不要什么功能,完全跟着心走,目前体验下来,感觉还是蛮爽的.比在公司产品要你做什么你 ...

  8. 不同程序用不同网络_微信小程序直播登场,与平台直播有何不同?

    星标我,不要迷路哦~ 微信小程序直播开启公测了.在直播这个流量阵地里,每一个科技巨头,每一个零售商家,甚至是每一个个体,都渴望借助直播获得新的机遇. 1月中旬,不少商家收到小程序直播的公测邀请,并已交 ...

  9. 程序左上角的字_微信内测7.0.7新版本,小程序迎来大改动!

    最近几个月来,微信就跟打了鸡血一样不断更新了多个版本上线多个新功能.此前7月末,微信安卓7.0.6带来了将收藏笔记,文件预览等页面设为浮窗的功能,目前最多支持5个文档或笔记设为浮窗.这不,距离微信7. ...

  10. 企业微信小程序可用存储空间不足_微信小程序为什么能帮助企业商家引流?

    点击蓝字 关注我们 微信小程序,腾讯公司于2017年推出的一款手机应用.自小程序诞生以来,各行各业都有不少企业和商家开发了自己的小程序,并通过小程序为自己吸引了巨大的流量.那么,小程序为什么能帮助企业 ...

最新文章

  1. VC串口通信编程-2
  2. linux哪些分区用固态硬盘,关于linux:简单聊聊固态硬盘的物理结构
  3. TrojanDownloader简单分析
  4. Mysql读写分离php脚本
  5. mysql group 条件,mysql - mysql group by,两个条件,限制1 - SO中文参考 - www.soinside.com...
  6. 如何在Spring Boot应用程序中使用配置文件
  7. 解决正在等待响应_解决一些等待问题
  8. js动态生成按钮,页面用DIV简单布局2
  9. linux中awk命令_Linux / Unix中的AWK命令
  10. offline tablespace的几种方法
  11. IOS发布应用照片大小
  12. 对+=赋值运算符的认识
  13. 后端要学MySQL_后端程序员需要掌握MySQL数据库吗
  14. Java多线程面试题,我丝毫不慌
  15. ​【预测模型】基于粒子群算法优化最小二乘支持向量机实现数据分类matlab代码
  16. python输入年份判断生肖_python年份判断生肖
  17. 守护线程setDaemon的理解
  18. 【课程设计|C++】设计一个哈夫曼编码器/译码器设计
  19. C++面试题总结,一篇就够了
  20. 转行程序员日记---2020-10-19【开始加班了】

热门文章

  1. lic库的学习与使用流程(一般的库的使用流程)编译运行含有外包库程序的操作export和-L -I
  2. 半导体的PN结及其基本特性
  3. 我们是怎么简单打开百度的?
  4. stm32增量式编码器使用流程
  5. OOC-用C实现面向对象
  6. H. Zebras and Ocelots -ICPC North Central NA Contest 2017
  7. STM32绝对地址赋值
  8. 什么是BI、什么是ETL?一篇文章告诉你
  9. 普适计算-2014/03/21
  10. JVM垃圾收集器详解之Parallel Scavenge