codecamp

快应用 map

概述

地图

子组件

支持且只支持 ​<custommarker>​ 作为其子组件 ​1060+

属性

支持 通用属性

名称类型默认值必填描述
latitude<number>默认为当前位置,否则为北京中心纬度
longitude<number>默认为当前位置,否则为北京中心经度
coordtype<string>-中心坐标坐标系,如不为空,组件将自动做坐标转换。可选值可通过 getSupportedCoordTypes 获取
scale<number>11缩放级别,4-20
rotate<number>0逆时针旋转角度
markers<array>-用来标记地图上的点
showmylocation<boolean>false显示带有方向的当前定位点
polylines<array>-折线
polygons 1050+<array>-多边形
circles<array>-地图上显示圆
controls<array>-控件
groundoverlays<array>-贴图
heatmaplayer 1070+<object>-显示热力图
includepoints<array>-缩放视野以包含所有给定的坐标点
showcompass 1040+<boolean>true是否显示指南针控件,设置为true时,旋转地图后指南针出现
showscale 1070+<boolean>false是否显示比例尺控件
showzoom 1070+<boolean>false是否显示放大缩小功能控件
enableoverlooking 1040+<boolean>false控制启用或禁用俯视(3D)功能,默认关闭。如果启用,则用户可使用双指 向下或向上滑动到俯视图
enablezoom 1040+<boolean>true是否支持缩放
enablescroll 1040+<boolean>true是否支持拖动
enablerotate 1040+<boolean>true是否支持旋转

注:

  1. 一级属性都是全部小写的格式,并不符合驼峰命名方式,这里的 coordtype 属性与下文需加以区分;
  2. 如果地图没有加载完毕,includepoints 属性不生效,建议在 loaded 监听事件中设置该属性。

子属性

markers

名称类型默认值必填描述
id<number>-1每个标记点的唯一标识
latitude<number>-标记点纬度
longitude<number>-标记点经度
coordType<string>-标记点坐标坐标系,如不为空,组件将自动做坐标转换。可选值可通过 getSupportedCoordTypes 获取
offsetX 1030+<number>-标记点固定位置距离原点的 X 坐标,map 组件的左上角为原点(0,0)。设置了 offsetX,offsetY 后,marker 的坐标位置将不再生效。
offsetY 1030+<number>-标记点固定位置距离原点的 Y 坐标,map 组件的左上角为原点(0,0)。设置了 offsetX,offsetY 后,marker 的坐标位置将不再生效。
title<string>-标记点名称
iconPath<uri>-标记图标资源的 uri。支持本地绝对路径;1030+版本支持网络路径
opacity<number>1标记透明度,0-1
rotate<number>0逆时针旋转角度
width<length>标记图实际宽度标记图宽度
height<length>标记图实际高度标记图高度
anchor<object>{x:0.5,y:1}标记点在标记图标的位置,x 表示横向坐标,取值范围 0-1,y 表示纵向坐标,取值范围 0-1
callout<object>-标记点上方的文本弹窗
label 1040+<object>-标记点周边展示文本
zIndex<number>-z 轴坐标,用来描述重叠时的展示顺序

markers-callout

名称类型默认值必填描述
convertHtml 1040+<boolean>falsecontent内容以html格式展示
content<string>-文本内容
color<color>#000000字体颜色
fontSize<number>30px文本字号
borderRadius<length>0px边框圆角
padding<length>0px文本边缘留白,支持 1-4 个参数
backgroundColor<color>#ffffff背景色
displaybyclick | alwaysbyclick点击触发显示还是常显
textAlignleft | right | centercenter文本对齐方式

注:

convertHtml为true时,content支持展示的tag有:br、p、strong、b、font、sup、sub、u及h1到h6 。

markers-label 1040+

名称类型默认值必填描述
content<string>-文本内容
color<color>#000000字体颜色
fontSize<number>30px文本字号
anchorX<number>0label的坐标,原点是 marker 对应的经纬度,对应水平偏移
anchorY<number>0label的坐标,原点是 marker 对应的经纬度,对应垂直偏移
borderRadius<length>0px边框圆角
padding<length>0px文本边缘留白,支持 1-4 个参数
backgroundColor<color>#ffffff背景色
textAlignleft | right | centercenter文本对齐方式

polylines

名称类型默认值必填描述
points<array>-路线上点的数组[{latitude, longitude, coordType}]
color<color>#666666路线颜色,#666666不可简写为#666
width<length>10px路线宽度
dotted<boolean>false是否为虚线
arrowLine 1050+<boolean>false是否展示带箭头纹理的线
arrowIconPath 1050+<uri>-更换纹理图标,在arrowLine为true时生效,只支持本地绝对路径图片,图片宽、高需设计为2的整数倍
zIndex<number>-z 轴坐标,用来描述重叠时的展示顺序

polygons 1050+

名称类型默认值必填描述
points<array>-经纬度数组[{latitude, longitude, coordType}]
strokeColor<color>#666666描边的颜色
strokeWidth<length>5px描边的宽度
fillColor<color>#666666填充颜色
zIndex<number>-z 轴坐标,用来描述重叠时的展示顺序

circles

名称类型默认值必填描述
latitude<number>-圆心的纬度
longitude<number>-圆心的经度
coordType<string>-圆心坐标坐标系,如不为空,组件将自动做坐标转换。可选值可通过 getSupportedCoordTypes 获取
radius<number>-半径(单位:米)
fillColor<color>#666666填充颜色
borderWidth<length>0px描边的宽度
borderColor<color>#666666描边的颜色
zIndex<number>-z 轴坐标,用来描述重叠时的展示顺序

groundoverlays

名称类型默认值必填描述
id<number>-1贴图 id
northEast<object>-贴图东北角坐标
southWest<object>-贴图西南角坐标
iconPath<uri>-图片资源的本地绝对路径
opacity<number>1透明度,0-1
visible<boolean>true可见性
zIndex<number>-z 轴坐标,用来描述重叠时的展示顺序

heatmaplayer 1070+

名称类型默认值必填描述
coordType<string>-坐标系
weightedPoints<array>-带权值的经纬度位置点的数组 {latitude, longitude,intensity: number},大小不能为 0,latitude 和 longitude 必填,intensity 默认为 1
gradient<object>{colors: [rgb(0, 0, 200)rgb(0, 225, 0)rgb(255, 0, 0)], startPoints: [0.08, 0.4, 1.0]}热力图渐变 {colors: [], startPoints: []},colors 和 statPoints 不能为 null ,长度不能为 0 ,两数组长度须一致,startPoints 数据必须递增;colors: 渐变色用到的所有颜色数组, 按声明的顺序由冷到热;startPoints: 每一个颜色的起始点数组范围 [0.0, 1.0],与 colors 数组一一对应
opacity<number>0.6热力图层透明度,范围 [0, 1]
radius<length>12px热力图点半径,范围 [10,50]

northEast/southWest

名称类型默认值必填描述
latitude<number>-纬度
longitude<number>-经度
coordType<string>-坐标系

controls

名称类型默认值必填描述
id<number>-1控件的 id
position<object>-控件相对地图组件的位置
iconPath<string>-控件图标资源的本地绝对路径
clickable<boolean>true是否可点击

controls-position

名称类型默认值必填描述
left<length>0和地图左边界的距离
right<length>0和地图右边界的距离,指定 left 时,该属性无效
top<length>0和地图上边界的距离
bottom<length>0和地图下边界的距离,指定 top 时,该属性无效
width<length>-控件宽度
height<length>-控件高度

样式

支持 通用样式

名称类型默认值必填描述
mylocation 1030+--简写属性,在一个声明中设置所有的 mylocation 属性,可以按顺序设置属性 mylocation-fill-color mylocation-stroke-color mylocation-icon-path,不设置的值为默认值
mylocation-fill-color 1030+<color>rgba(135, 206, 235, 0.15)定位精度圈填充颜色。支持透明(rgba(0,0,0,0))
mylocation-stroke-color 1030+<color>rgba(135, 206, 235, 0.15)定位精度圈描边颜色。支持透明(rgba(0,0,0,0))
mylocation-icon-path 1030+<uri>-标记图标资源的本地绝对路径

事件

支持 通用事件

名称参数描述
loaded-地图渲染更新完成时触发
regionchange{southwest, northeast}视野发生变化时触发
tap{latitude, longitude}点击地图时触发
markertap{markerId}点击地图标记点时触发
callouttap{markerId}点击标记点对应弹窗触发
controltap{controlId}点击控件触发
poitap 1050+{OBJECT}点击地图poi点时触发

poitap 的 OBJECT 参数列表

参数类型说明
poiIdString代表poi的唯一Id
poiNameStringpoi名称
latitudeNumber纬度
longitudeNumber经度

方法

名称参数描述
getCenterLocationOBJECT获取地图中心点坐标
translateMarkerOBJECT在地图上移动 marker
moveToMyLocation-将地图中心点移动到当前位置坐标
includePointsOBJECT缩放地图,展示所有给定坐标点,如果地图未加载完毕,该方法不生效
getRegionOBJECT获取当前地图视野范围
getScaleOBJECT获取地图的放大级别
getSupportedCoordTypesOBJECT获取地图当前支持的坐标系
getCoordTypeOBJECT获取地图当前使用的坐标系
convertCoordOBJECT对坐标的坐标系进行转换
setCompassPosition 1070+OBJECT设置指南针控件相对地图左上角的距离
setScalePosition 1070+OBJECT设置地图比例尺控件相对地图左上角的距离
setZoomPosition 1070+OBJECT设置地图放大缩小控件相对地图左上角的距离
setMaxAndMinScaleLevel 1070+OBJECT自定义缩放级别限制,范围 4-20

getCenterLocation 的 OBJECT 参数列表

参数类型必填说明
successFunction接口调用成功的回调函数, res = {latitude, longitude}
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数

translateMarker 的 OBJECT 参数列表

参数类型必填说明
markerIdNumber指定 marker
destinationObject指定 marker 移动到的目标点({latitude, longitude}
autoRotateBoolean移动过程中是否自动旋转 marker
rotateNumbermarker 的旋转角度,autoRotate 为 true,该值无效
durationNumber动画持续时长,默认值 1000ms
animationEndFunction动画结束回调函数
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数

includePoints 的 OBJECT 参数列表

参数类型必填说明
pointsArray要显示在可视区域内的坐标点数组,[{latitude, longitude, coordType}]
paddingString坐标点形成的最小矩形区域距离边缘的最小距离,支持 1-4 个参数,单位:px
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数

getRegion 的 OBJECT 参数列表

参数类型必填说明
successFunction接口调用成功的回调函数, res = {southwest, northeast},西南角与东北角的经纬度
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数

getScale 的 OBJECT 参数列表

参数类型必填说明
successFunction接口调用成功的回调函数,res = {scale}
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数

getSupportedCoordTypes 的 OBJECT 参数列表

参数类型必填说明
successFunction接口调用成功的回调函数,res = coordTypes:[coordType1, coordType2, ...]
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数

getCoordType 的 OBJECT 参数列表

参数类型必填说明
latitude<number>坐标点的纬度
longitude<number>坐标点的经度
coordType<string>坐标点的坐标系
successFunction接口调用成功的回调函数,res = {coordType},coordType 可选值可通过 getSupportedCoordTypes 获取,如果坐标点缺省,则默认屏幕中心点为坐标点
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数

convertCoord 的 OBJECT 参数列表

参数类型必填说明
from<string>输入坐标当前的坐标系,可选值可通过 getSupportedCoordTypes 获取,当前只支持 wgs84
to<string>输入坐标需要转换输出的坐标系,可选值可通过 getSupportedCoordTypes 获取,默认为当前地图坐标系
latitude<number>需要转换的坐标纬度
longitude<number>需要转换的坐标经度
successFunction接口调用成功的回调函数,res = {latitude, longitude}
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数

setCompassPosition 的 OBJECT 参数列表

参数类型必填说明
x<length>指南针控件相对于地图左侧的横向距离,例如:50px
y<length>指南针控件相对于地图上侧的纵向距离,例如:50px

setScalePosition 的 OBJECT 参数列表

参数类型必填说明
x<length>比例尺控件相对于地图左侧的横向距离,例如:50px
y<length>比例尺控件相对于地图上侧的纵向距离,例如:50px

setZoomPosition 的 OBJECT 参数列表

参数类型必填说明
x<length>放大缩小控件相对于地图左侧的横向距离,例如:50px
y<length>放大缩小控件相对于地图上侧的纵向距离,例如:50px

setMaxAndMinScaleLevel 的 OBJECT 参数列表

参数类型必填说明
maxLevel<number>最大倍数
minLevel<number>最小倍数

map   示例代码

查看示例代码

支持明细

厂商支持备注
小米1020+-
中兴1020+-
华为1030+-
金立1020+-
联想1020+-
魅族1020+-
努比亚1020+-
OPPO1020+-
vivo1020+-
一加--
预览版1020+-


快应用 canvas组件
快应用 custommarker
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

快应用 参考手册

快应用 安全

快应用 声音音频

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }