开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
视图容器
基础内容
表单组件
导航
媒体组件
画布
地图
开放组件
无障碍访问
页面属性配置节点
扩展组件
广告
开发 > 组件 > 地图 > map 地图
收藏
订阅更新
我的文档
设置
简介
同一个页面需要展示多个 map 组件的话,需要使用不同的 id 。map 组件是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其它组件无论设置 z-index 为多少,都无法在原生组件之上使用限制。
使用限制
仅支持高德地图 style。
支持通过同层渲染实现 cover-view 覆盖 map 组件。同层渲染支持范围 10.1.35 及其以上版本 android 的小程序,10.1.50 及其以上版本 ios 的小程序。
不支持在 scroll-view 中使用 map 组件。
不支持使用 css  动画,css 动画对 map 组件无效。
缩小或者放大了地图比例尺之后,若再次设置 data 经纬度到一个地点,请在 onregionchange 函数中重新设置 data 的 scale 值,否则会出现拖动地图区域后,重新加载导致地图比例尺又变回缩放前的大小,具体请参照示例代码 regionchange 函数部分。
基础库 开始支持 optimize 属性,开启 optimize 后,开发者不需要再监听 onregionchange 来更新 scale 属性值以保证缩放比例不变。此特性在客户端 10.1.68 以上支持,可通过 my.caniuse(map.optimize)进行检测。
扫码体验

使用
在线示例
 
属性说明
属性
类型
说明
style
string
内联样式。
class
string
样式名。
latitude
number
中心纬度。
版本要求:基础库 及以上
longitude
number
中心经度。
版本要求:基础库 及以上
scale
number
缩放级别,取值范围为 5-18。
默认值:16
版本要求:基础库 及以上
skew
number
倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角。
默认值:0
版本要求:基础库 及以上
rotate
number
顺时针旋转的角度,范围 0 ~ 360。
默认值:0
版本要求:基础库 及以上
markers
array
覆盖物,在地图上的一个点绘制图标。
版本要求:基础库 及以上
polyline
array
覆盖物,多个连贯点的集合(路线)。
版本要求:基础库 及以上
circles
array
覆盖物,圆。
版本要求:基础库 及以上
controls
array
在地图 view 之上的一个控件。
版本要求:基础库 及以上
polygon
array
覆盖物,多边形。
版本要求:基础库 及以上
show-location
boolean
是否显示带有方向的当前定位点。
版本要求:基础库 及以上
include-points
array
视野将进行小范围延伸包含传入的坐标。
[{
   latitude: 30.279383,
   longitude: 120.131441,
}]
版本要求:基础库 及以上
include-padding
object
视野在地图 padding 范围内展示。
{
    left:0, right:0,
    top:0, bottom:0
}
版本要求:基础库 及以上
ground-overlays
array
覆盖物,自定义贴图。
[{
    // 刷新的时候需要变更id值
    id:'0', 
    // 右上,左下
    'include-points':[{
        latitude: 39.935029,
        longitude: 116.384377,
    },{
        latitude: 39.939577,
        longitude: 116.388331,
    }],
    image:'/image/overlay.png',
    alpha:0.25,
    zindex:1
}]
版本要求:基础库 及以上
tile-overlay
object
覆盖物,网格贴图。
{
    url:'http://xxx',
    type:0, // url类型
    tilewidth:256,
    tileheight:256,
    zindex:1,
}
版本要求:基础库 及以上
custom-map-style
string
设置地图样式。
default:默认样式
light:精简样式
版本要求:基础库 及以上
panels
array
基于 map 高级定制渲染,设置覆盖在地图上的 view。
版本要求:基础库 及以上
setting
object
设置。
{
  // 手势
  gestureenable: 1,
  // 比例尺
  showscale: 1,
  // 指南针
  showcompass: 1,
  //双手下滑
  tiltgesturesenabled: 1,
  // 交通路况展示
  trafficenabled: 0,
  // 地图 poi 信息
  showmaptext: 0,
  // 高德地图 logo 位置
  logoposition: {
    centerx: 150,
    centery: 90
  }
// 自定义地图样式
 custommapstylesrc: "/resources/style/style_v7.data"
}
onmarkertap
eventhandle
点击 marker 时触发。
{
    markerid,
    latitude,
    longitude, 
}
版本要求:基础库 及以上
oncallouttap
eventhandle
点击 marker 对应的 callout 时触发。
{
    markerid,
    latitude,
    longitude, 
}
版本要求:基础库 及以上
oncontroltap
eventhandle
点击 control 时触发。
{
    controlid
}
版本要求:基础库 及以上
onregionchange
eventhandle
视野发生变化时触发。
基础库 1.24.0 版本新增 skew、rotate、causedby 返回;
begin 阶段 causedby 有效值为 update(接口触发)、gesture(手势触发);
end 阶段 causedby 有效值为 update(接口触发)、drag/scale/skew/rotate (手势触发)。
{
    type: "begin/end", 
    latitude,
    longitude, 
    scale,
    skew,
    rotate,
    causedby: "update/gesture"
}
版本要求:基础库 及以上
ontap
eventhandle
点击地图时触发。
{
    latitude,
    longitude, 
}
版本要求:基础库 及以上
onpaneltap
eventhandle
点击 panel 时触发。

   panelid,
   layoutid,
}
版本要求:基础库 及以上
show-compass
boolean
显示指南针。
版本要求:基础库 2.7.2 及以上
show-scale
boolean
显示比例尺。
版本要求:基础库 2.7.2 及以上
enable-overlooking
boolean
开启俯视。
版本要求:基础库 2.7.2 及以上
enable-zoom
boolean
是否支持缩放。
版本要求:基础库 2.7.2 及以上
enable-scroll
boolean
是否支持拖动。
版本要求:基础库 2.7.2 及以上
enable-rotate
boolean
是否支持旋转。
版本要求:基础库 2.7.2 及以上
enable-traffic
boolean
是否开启实时路况。
版本要求:基础库 2.7.2 及以上
enable-poi
boolean
是否展示 poi 点。
版本要求:基础库 2.7.2 及以上
enable-building
boolean
是否展示建筑物。
版本要求:基础库 2.7.2 及以上
enable-satellite
boolean
是否开启卫星图。 版本要求:基础库 2.7.2 及以上
oninitcomplete
eventhandle
地图初始化完成即将开始渲染第一帧时触发。
版本要求:基础库 2.7.2 及以上
markers
简介
标记点,用于在地图上显示标记的位置。
使用限制
可利用该参数显示多个定位点。
地点标注不支持设置英文。
属性
类型
必填
描述
id
number

标记点 id,点击事件回调会返回此 id。
latitude
float

纬度,范围 -90 ~ 90。
longitude
float

经度,范围 -180 ~ 180。
title
string

标注点名。
iconpath
string

项目目录下的图片路径,不能用相对路径只能用 / 开头的绝对路径。
示例:/pages/image/test.jpg
iconlayout
object

map 高级定制渲染绘制 marker 样式,优先级高于 iconpath, 对象参照 layout。
src 支持 :
绝对路径:如 https://gw.alipayobjects.com/xxx
相对路径(基准为项目根目录):如 /marker/xiang.xml
注意:相对路径不支持 ./marker/xiang.xml 方式。
版本要求:基础库  及以上
rotate
number

顺时针旋转的角度,范围 0 ~ 360,默认为 0。
alpha
number

是否透明,默认为 1。
width
number

默认为图片的实际宽度。
height
number

默认为图片的实际高度。
displayranges
array

标明在特定地图缩放级别下展示。
[{
  "from": 10,
  "to": 15
 }]
版本要求:基础库  及以上
callout
object

自定义 marker 上的气泡窗口,地图上最多同时展示一个,绑定 oncallouttap。
{
    content:"xxx"
}
anchorx
double

经纬度在标注图标的锚点-横向值,这两个值需要成对出现,anchorx 表示横向(0-1),y 表示竖向(0-1)。
anchorx:0.5
anchory:1
表示底边中点。
anchory
double

customcallout
object

callout 背景自定义,目前只支持高德地图 style。
{
  "type": 2,
  "desclist": [{
    "desc": "预计",
    "desccolor": "#333333"
  }, {
    "desc": "5分钟",
    "desccolor": "#108ee9"
  }, {
    "desc": "到达",
    "desccolor": "#333333"
  }],
  "isshow": 1
}
iconappendstr
string

和 iconpath 一起使用,会将 iconpath 对应的图片及该字符串共同生成一个图片,当成 marker 的图标。
iconappendstrcolor
string

底部描述文本颜色。
默认值:#33b276。
fixedpoint
object

基于屏幕位置扎点。
{
    //距离地图左上角的像素数,number
    originx:100, 
    originy:100  
}
markerlevel
number

marker 在地图上的绘制层级,与地图上其它覆盖物统一的 z 坐标系。
版本要求:基础库  及以上
label
object

marker 上的气泡,地图上可同时展示多个,绑定 onmarkertap。
{
    content:"hello label",
    color:"#000000",
    fontsize:12,
    borderradius:"3",
    bgcolor:"#ffffff",
    padding:5,
}
版本要求:基础库  及以上
style
object

自定义 marker 的样式和内容。
版本要求:基础库  及以上

polygon
用于构造多边形对象。
属性
类型
必填
描述
points
array

经纬度数组。
[{
  latitude: 0,
  longitude: 0
}]
版本要求:基础库 及以上
color
string

线的颜色,用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeaa。
注意:当前 android 与 ios 上此属性默认值存在差异(分别为 transparent 与 #ff0000ff ),建议在代码中统一显式设置。
版本要求:基础库 及以上
fillcolor
string

填充色,用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeaa。
版本要求:基础库 及以上
width
number

线的宽度。
注意:当前 android 与 ios 上此属性默认值存在差异(分别为 0 与 5),建议在代码中统一显式设置。
版本要求:基础库 及以上
displayranges
array

标明在特定地图缩放级别下展示。
[{
  "from": 12,
  "to": 17
 }]
版本要求:基础库 及以上
polyline
用于指定一系列坐标点,从数组第一项连线至最后一项。
属性
类型
必填
描述
points
array

经纬度数组。
[{
  latitude: 0,
  longitude: 0
}]
color
string

线的颜色,用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeaa。
width
number

线的宽度。
dottedline
boolean

是否虚线。
默认值: false
iconwidth
number

使用纹理时的宽度。
版本要求:基础库 及以上
zindex
number
-
覆盖物的 z 轴坐标。
版本要求:基础库 及以上
iconpath
string
-
项目目录下的图片路径,可以用相对路径写法,以 '/' 开头则表示相对小程序根目录, 如果有 iconpath,会忽略 color。但是 iconpath 可以和 colorlist 联合使用,这样纹理会浮在彩虹线上方,为避免覆盖彩虹线,纹理图片背景色可以设置透明。
要求对应的贴图形状为正方形,尺寸为宽高是 2 的整数幂,如 16*16、64*64。
版本要求:基础库 及以上
colorlist
array
-
彩虹线,分段依据 points。例如 points 有5个点,那么 colorlist 就应该传 4 个颜色值,依此类推。如果 colorlist 数量小于4,那么剩下的线路颜色和最后一个颜色一样。
[
  "#aaaaaa",
  "#bbbbbb"
]
版本要求:基础库 及以上
circles
用于在地图上显示圆。
属性
类型
必填
描述
latitude
float

纬度,范围 -90 ~ 90。
版本要求:基础库 及以上
longitude
float

经度,范围 -180 ~ 180。
版本要求:基础库 及以上
color
string

描边的颜色,用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeaa。
版本要求:基础库 及以上
fillcolor
string

填充颜色,用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeaa。
版本要求:基础库 及以上
radius
number

半径(米)。
版本要求:基础库 及以上
strokewidth
number

描边的宽度。
版本要求:基础库 及以上
controls
用于在地图上显示控件,控件不随着地图移动。
属性
类型
必填
描述
id
number

控件 id,点击事件回调会返回此 id。
版本要求:基础库 及以上
position
object

控件在地图的位置。
版本要求:基础库 及以上
iconpath
string

项目目录下的图片路径,可以用相对路径写法,以'/'开头则表示相对小程序根目录。
版本要求:基础库 及以上
clickable
boolean

是否可点击。
默认值:false。
版本要求:基础库 及以上
position
控件在地图的位置,以及控件的大小。
属性
类型
必填
描述
left
number

距离地图的左边界多远。
默认值:0
top
number

距离地图的上边界多远。
默认值:0
width
number

控件宽度。
默认值:图片宽度
height
number

控件高度。
默认值:图片高度
callout
自定义标记点上方的气泡窗口。
说明:如果需要更加丰富的样式定义,可以使用 customcallout。
属性
类型
必填
描述
content
string

内容。
默认值:为空(null)
customcallout
当 layout 存在时,将忽略 type、time、desclist 属性,采用 layout 方式,使定制灵活度更高。具体可参考:map 高级定制渲染
属性
类型
必填
描述
type
number

样式类型。0 为黑色 style,1 为白色 style,2 为背景 文本,见下图。

time
string

时间值。当 type为 0、1、2 时为必填。
canshowontap
bool

是否可以点击显示。属性设置 true 之后行为和 callout 行为一致。
isshow
int

是否显示。默认为 0,不显示,1 为渲染之后自动显示。
desclist
array

描述数组。

    "type": 0,
    "time": "3",
    "desclist": [{ 
        "desc": "点击立即打车",
        "desccolor": "#ffffff" 
    }],
    "isshow": 1 
}
layout
object

使用 map 高级定制渲染。优先级最高, layout 对象参照 layout 定义。
layout
属性
类型
必填
描述
params
object

动态参数。
src
string

map 高级定制渲染,布局文件路径。如果 .xml 文件放在小程序包内, 需要在 min.project.json 设置白名单。
{
"format": 2,
"assetsinclude":["**/*.xml"] // 配置包含 xml
}
fixedpoint
基于屏幕位置的扎点。
属性
类型
必填
描述
originx
number

横向像素点,距离地图左上角的像素数值,从 0 开始。
originy
number

纵向像素点,距离地图左上角的像素数值,从 0 开始。
地图组件的经纬度是必须设置的, 若未设置经纬度,则默认是北京的经纬度。
custommapstylesrc
设置自定义地图样式,客户端 10.1.92 版本开始支持。接入步骤见下:
1通过 设置个性化地图样式,选择 7.0.0-7.7.0 版本,导出 style.data 文件。
2将样式文件内置或者放到远程服务端,生成资源路径,设置 custommapstylesrc;内置时,需要在 mini.project.json 中指定文件白名单:
custommapstylesrc 在setting 属性中的设置示例见下:
marker 图鉴
marker 样式优先级说明
customcallout,callout 与 label 互斥,优先级排序为:label > customcallout > callout 。
style 与 icon 互斥,优先级排序为:style > iconappendstr;style > icon。
style
结构
图片示例
最低版本
{
    type:1,
    text1:"style1",
    icon1:'/image/markericon.png',
    icon2:'/image/markervoice.png'
}

1.11.0
{
    type:2,
    text1:"style2",
    icon1:'image/markericon.png',
    icon2:'/image/markervoice.png'
}

1.12.0
{
    type:3,
    icon:'/image/marker.png',  // 选填
    text:"哈哈哈style3,哦耶",  // 必填
    color:'#33b276',  // 默认 #33b276
    bgcolor:'ffffff',  // 默认 #ffffff  
    gravity:"left", // left/center/right,默认 center
    fonttype:"small"  // small/standard/large,默认 standard
}

1.13.0
customcallout
结构
图片示例
最低版本

    "type": 0,
    "time": "3",
    "desclist": [{ 
        "desc": "点击立即打车",
        "desccolor": "#ffffff" 
    }],
    "isshow": 1 
}

1.10.0

    "type": 1,
    "time": "3",
    "desclist": [{ 
        "desc": "点击立即打车",
        "desccolor": "#333333" 
    }],
    "isshow": 1 
}

-
1.10.0
{
  "type": 2,
  "desclist": [{
    "desc": "预计",
    "desccolor": "#333333"
  }, {
    "desc": "5分钟",
    "desccolor": "#108ee9"
  }, {
    "desc": "到达",
    "desccolor": "#333333"
  }],
  "isshow": 1
}

1.10.0
label
参数列表
属性
描述
必填
默认值
content
内容

-
color
颜色

#000000
fontsize
字号

14
borderradius
绘图边角的弧度设置

20
bgcolor
背景颜色

#ffffff
padding
文字内容与边框之间的距离

10
结构
图鉴
最低版本
{
  content:"hello label",
  color:"#000000",
  fontsize:16,
  borderradius:5,
  bgcolor:"#ffffff",
  padding:12,
}

10.1.38
错误码


faq
q:map 组件如何跳转到高德的 app 中去进行导航?
a:可使用 my.openlocation
q:map 组件 optimize 属性设置了 true 后如何获取 scale 值?
a:optimize 属性设置了 true 后,如果需要获取 scale 值,必须要使用 onregionchange。
q:map组件是否支持海外功能?
a:目前不支持。
q:如何手动在地图上绘制多边形区域?
a:可以使用 polygon 进行绘制。
q:iconappendstr 里的文字能不能换行?
a:不支持。
q:地图组件里,设置了路径之后, 如何更改起点终点的 icon?
a:目前不支持更改。
q:如何修改地图经纬度?
a:建议使用 mapcontext.updatecomponents 修改经纬度。
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图