微信小程序地图

小程序地图组件map

官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/map.html

属性 类型 默认值 必填 说明 最低版本
longitude number 中心经度 1.0.0
latitude number 中心纬度 1.0.0
scale number 16 缩放级别,取值范围为3-20 1.0.0
markers Array.<marker> 标记点 1.0.0
covers Array.<cover> 即将移除,请使用 markers 1.0.0
polyline Array.<polyline> 路线 1.0.0
circles Array.<circle> 1.0.0
controls Array.<control> 控件(即将废弃,建议使用 cover-view 1.0.0
include-points Array.<point> 缩放视野以包含所有给定的坐标点 1.0.0
show-location boolean false 显示带有方向的当前定位点 1.0.0
polygons Array.<polygon> 多边形 2.3.0
subkey string 个性化地图使用的key 2.3.0
layer-style number 1 个性化地图配置的 style,不支持动态修改
rotate number 0 旋转角度,范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 2.5.0
skew number 0 倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角 2.5.0
enable-3D boolean false 展示3D楼块(工具暂不支持) 2.3.0
show-compass boolean false 显示指南针 2.3.0
show-scale boolean false 显示比例尺,工具暂不支持 2.8.0
enable-overlooking boolean false 开启俯视 2.3.0
enable-zoom boolean true 是否支持缩放 2.3.0
enable-scroll boolean true 是否支持拖动 2.3.0
enable-rotate boolean false 是否支持旋转 2.3.0
enable-satellite boolean false 是否开启卫星图 2.7.0
enable-traffic boolean false 是否开启实时路况 2.7.0
setting object 配置项 2.8.2
bindtap eventhandle 点击地图时触发,2.9.0起返回经纬度信息 1.0.0
bindmarkertap eventhandle 点击标记点时触发,e.detail = {markerId} 1.0.0
bindlabeltap eventhandle 点击label时触发,e.detail = {markerId} 2.9.0
bindcontroltap eventhandle 点击控件时触发,e.detail = {controlId} 1.0.0
bindcallouttap eventhandle 点击标记点对应的气泡时触发e.detail = {markerId} 1.2.0
bindupdated eventhandle 在地图渲染更新完成时触发 1.6.0
bindregionchange eventhandle 视野发生变化时触发, 2.3.0
bindpoitap eventhandle 点击地图poi点时触发,e.detail = {name, longitude, latitude} 2.3.0

小程序地图提供的API:

媒体-地图:

  • MapContext wx.createMapContext(string mapId, Object this):创建map上下文MapContext对象。
参数:
    string mapId:map组件的id
    Object this:在自定义组件下,当前组件实例的this,以操作组件内 map组件
  • MapContext.getCenterLocation(Object object):获取当前地图中心的经纬度。返回的是 gcj02 坐标系,可以用于 wx.openLocation()
Object object参数:
    success[function]:接口调用成功的回调函数
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • MapContext.getRegion(Object object):获取当前地图的视野范围
Object object参数:
    success[function]:接口调用成功的回调函数
        southwest[number]:西南角经纬度
        northeast[number]:东北角经纬度
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • MapContext.getRotate(Object object):获取当前地图的旋转角
Object object参数:
    success[function]:接口调用成功的回调函数
        rotate[number]:旋转角
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • MapContext.getScale(Object object):获取当前地图的缩放级别
Object object参数:
    success[function]:接口调用成功的回调函数
        scale[number]:缩放值
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • MapContext.getSkew(Object object):获取当前地图的倾斜角
Object object参数:
    success[function]:接口调用成功的回调函数
        skew[number]:倾斜角
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • MapContext.includePoints(Object object):缩放视野展示所有经纬度
Object object参数:
    points[Array.&lt;Object&gt;]:要显示在可视区域内的坐标点列表
    padding[Array.&lt;number&gt;]:坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为[上,右,下,左],安卓上只能识别数组第一项,上下左右的padding一致。开发者工具暂不支持padding参数。
    success[function]:接口调用成功的回调函数
        longitude[number]:经度
        latitude[number]:纬度
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • MapContext.moveToLocation(Object object):将地图中心移置当前定位点,此时需设置地图组件 show-location 为true。2.8.0起支持将地图中心移动到指定位置。
Object object参数:
    longitude[number]:经度
    latitude[number]:纬度
    success[function]:接口调用成功的回调函数
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • MapContext.translateMarker(Object object):平移marker,带动画
Object object参数:
    markerId[number]:指定 marker
    destination[Object]:指定 marker 移动到的目标点
    autoRotate[boolean]:移动过程中是否自动旋转 marker
    rotate[number]:marker 的旋转角度
    duration[number]:动画持续时长,平移与旋转分别计算
    animationEnd[function]:动画结束回调函数
    success[function]:接口调用成功的回调函数
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)

位置

  • wx.stopLocationUpdate():关闭监听实时位置变化,前后台都停止消息接收
Object object参数:
    success[function]:接口调用成功的回调函数
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • wx.startLocationUpdateBackground(Object object):开启小程序进入前后台时均接收位置消息,需引导用户开启授权。授权以后,小程序在运行中或进入后台均可接受位置消息变化。
--调用前需要 用户授权scope.userLocationBackground
Object object参数:
    success[function]:接口调用成功的回调函数
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • wx.startLocationUpdate(Object object):开启小程序进入前台时接收位置消息
    --调用前需要 用户授权scope.userLocation
Object object参数:
    success[function]:接口调用成功的回调函数
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • wx.openLocation(Object object):使用微信内置地图查看位置
Object object参数:
    latitude[number]:纬度,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系
    longitude[number]:经度,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系
    scale[number]:默认值18,缩放比例,范围5~18
    name[string]:位置名
    address[string]:地址的详细说明
    success[function]:接口调用成功的回调函数
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • wx.onLocationChange(function callback):监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackground、wx.startLocationUpdate使用。
Object res参数:
    latitude[number]:纬度,范围为 -90~90,负数表示南纬
    longitude[number]:经度,范围为 -180~180,负数表示西经
    speed[number]:速度,单位 m/s
    accuracy[number]:位置的精确度
    altitude[number]:高度,单位 m
    verticalAccuracy[number]:垂直精度,单位 m(Android 无法获取,返回 0)
    horizontalAccuracy[number]:水平精度,单位 m

  • wx.offLocationChange(Object object):取消监听实时地理位置变化事件
Object object参数:
    function callback:实时地理位置变化事件的回调函数
  • wx.getLocation(Object object):获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定 highAccuracyExpireTime 作为超时时间
--调用前需要 用户授权scope.userLocation
Object object参数:
    type[string]:默认值wgs84,wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
    altitude[string]:默认值false,传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度
    isHighAccuracy[boolean]:默认值false,开启高精度定位
    highAccuracyExpireTime[number]:高精度定位超时时间(ms),指定时间内返回最高精度,该值3000ms以上高精度定位才有效果
    success[function]:接口调用成功的回调函数
        latitude[number]:纬度,范围为 -90~90,负数表示南纬
        longitude[number]:经度,范围为 -180~180,负数表示西经
        speed[number]:速度,单位 m/s
        accuracy[number]:位置的精确度
        altitude[number]:高度,单位 m
        verticalAccuracy[number]:垂直精度,单位 m(Android 无法获取,返回 0)
        horizontalAccuracy[number]:水平精度,单位 m
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
  • wx.chooseLocation(Object object):打开地图选择位置
Object object参数:
    latitude[number]:目标地纬度
    longitude[number]:目标地经度
    success[function]:接口调用成功的回调函数
        name[string]:位置名称
        address[string]:详细地址
        latitude[string]:纬度,浮点数,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系
        longitude[string]:经度,浮点数,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系
    fail[function]:接口调用失败的回调函数
    complete[function]:接口调用结束的回调函数(调用成功、失败都会执行)
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,492评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,048评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,927评论 0 358
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,293评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,309评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,024评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,638评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,546评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,073评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,188评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,321评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,998评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,678评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,186评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,303评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,663评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,330评论 2 358