map

    地图(v2.7.0 起支持)。相关api wx.createMapContext

    个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通,详见。小程序内地图组件应使用同一 ,可通过 layer-style(地图官网设置的样式 style 编号)属性选择不同的底图风格。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

    视野改变时,regionchange 会触发两次,返回的 type 值分别为 begin / end。

    起 end 阶段返回 causedBy,有效值为 drag(拖动导致)、scale(缩放导致)、update(调用更新接口导致)、skew仅在 end 阶段返回

    setting

    提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotateskew,通过 setData 分开设置时无法同时生效,需通过 settting 统一修改。

    marker

    标记点用于在地图上显示标记的位置

    属性说明类型必填备注最低版本
    id标记点 idnumbermarker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。
    latitude纬度number浮点数,范围 -90 ~ 90
    longitude经度number浮点数,范围 -180 ~ 180
    title标注点名string点击时显示,callout存在时将被忽略
    zIndex显示层级number2.3.0
    iconPath显示的图标string项目目录下的图片路径,支持网络路径、本地路径、代码包路径()
    rotate旋转角度number顺时针旋转的角度,范围 0 ~ 360,默认为 0
    alpha标注的透明度number默认 1,无透明,范围 0 ~ 1
    width标注图标宽度number/string默认为图片实际宽度
    height标注图标高度number/string默认为图片实际高度
    callout自定义标记点上方的气泡窗口Object支持的属性见下表,可识别换行符。1.2.0
    label为标记点旁边增加标签Object支持的属性见下表,可识别换行符。
    anchor经纬度在标注图标的锚点,默认底边中点Object{x, y},x 表示横向(0-1),y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点1.2.0
    aria-label无障碍访问,(属性)元素的额外描述string

    marker 上的气泡 callout

    属性说明类型最低版本
    content文本string1.2.0
    color文本颜色string
    fontSize文字大小number1.2.0
    borderRadius边框圆角number
    borderWidth边框宽度number2.3.0
    borderColor边框颜色string
    bgColor背景色string1.2.0
    padding文本边缘留白number
    display'BYCLICK':点击显示; 'ALWAYS':常显string1.2.0
    textAlign文本对齐方式。有效值: left, right, centerstring

    polyline

    属性说明类型必填备注最低版本
    points经纬度数组array[{latitude: 0, longitude: 0}]
    color线的颜色string十六进制
    width线的宽度number
    dottedLine是否虚线boolean默认 false
    arrowLine带箭头的线boolean默认 false,开发者工具暂不支持该属性1.2.0
    arrowIconPath更换箭头图标string在 arrowLine 为 true 时生效
    borderColor线的边框颜色string1.2.0
    borderWidth线的厚度number

    polygon

    指定一系列坐标点,根据 points 坐标数据生成闭合多边形

    属性说明类型必填备注最低版本
    points经纬度数组array[{latitude: 0, longitude: 0}]2.3.0
    strokeWidth描边的宽度number
    strokeColor描边的颜色string十六进制2.3.0
    fillColor填充颜色string十六进制
    zIndex设置多边形Z轴数值number

    circle

    在地图上显示圆

    在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view

    属性说明类型必填备注
    id控件idnumber在控件点击事件回调会返回此id
    position控件在地图的位置object控件相对地图位置
    iconPath显示的图标string项目目录下的图片路径,支持本地路径、代码包路径
    clickable是否可点击boolean默认不可点击

    position

    属性说明类型必填备注
    left距离地图的左边界多远number默认为0
    top距离地图的上边界多远number默认为0
    width控件宽度number默认为图片宽度
    height控件高度number默认为图片高度

    bindregionchange 返回值

    Bug & Tip

    • tip:个性化地图暂不支持工具中调试。请先使用微信客户端进行测试。
    • :地图中的颜色值color/borderColor/bgColor等需使用6位(8位)十六进制表示,8位时后两位表示alpha值,如:#000000AA
    • tip:地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
    • tip: map 组件使用的经纬度是火星坐标系,调用 接口需要指定 typegcj02
    • tip:从 2.8.0 起 map 支持同层渲染,更多请参考原生组件使用限制
    • :请注意。
    scale34567891011
    比例1000km500km200km100km50km50km20km10km5km
    scale121314151617181920
    比例2km1km500m200m100m50m50m20m10m

    示例代码