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>false否content内容以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>0否label的坐标，原点是 marker 对应的经纬度，对应水平偏移
anchorY<number>0否label的坐标，原点是 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
rotateNumber否marker 的旋转角度，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+编程语言教程
取消
确定
目录

快应用 指南

快应用 教程

快应用 总述

快应用 入门教程

快应用 框架教程

快应用 组件教程

快应用 平台教程

快应用 接口

快应用 其他

快应用 工具

快应用 参考手册

快应用 框架概述

快应用 组件文档

快应用 通用组件

快应用 容器组件

快应用 基础组件

快应用 表单组件

快应用 媒体组件

快应用 其他组件

快应用 画布组件

快应用 第三方组件

快应用 接口文档

快应用 界面交互

快应用 网络访问

快应用 文件数据

快应用 系统能力

快应用 安全

快应用 图形图像

快应用 声音音频

快应用 厂商服务

快应用 第三方服务

快应用 厂商开发者平台

OPPO开放平台 快应用文档

快应用 开发工具

快应用 厂商开发者账号申请

快应用 资源下载

关闭

 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; }