该组件是地图组件。同一个页面需要展示多个 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 函数部分。

基础库 1.18.5 开始支持 optimize 属性，开启 optimize 后，开发者不需要再监听 onRegionChange 来更新 scale 属性值以保证缩放比例不变。此特性在客户端 10.1.68 以上支持，可通过 my.canIUse(map.optimize)进行检测。

扫码体验

示例代码

onControlTap="controltap" markers="{{markers}}"

onMarkerTap="markertap"

polyline="{{polyline}}"

circles="{{circles}}"

panels="{{panels}}"

onRegionChange="regionchange"

onTap="tap"

onPanelTap="onPanelTap"

show-location style="width: 100%; height: 300px;"

include-points="{{includePoints}}">

改scale

getCenterLocation

moveToLocation

改center

改markers

Page({

data: {

scale: 14,

longitude: 120.131441,

latitude: 30.279383,

markers: [{

iconPath: "/image/green_tri.png",

id: 10,

latitude: 30.279383,

longitude: 120.131441,

width: 50,

height: 50

},{

iconPath: "/image/green_tri.png",

id: 11,

latitude: 30.279383,

longitude: 120.131441,

width: 50,

height: 50,

customCallout: {

type: 1,

time: '1',

},

fixedPoint:{

originX: 400,

originY: 400,

},

iconAppendStr: '黄龙时代广场黄龙时代广场黄龙时代广场黄龙时代广场test'

}],

includePoints: [{

latitude: 30.279383,

longitude: 120.131441,

}],

polyline: [{

points: [{

longitude: 120.131441,

latitude: 30.279383

}, {

longitude: 120.128821,

latitude: 30.278200

}, {

longitude: 120.131618,

latitude: 30.277600

}, {

longitude: 120.132520,

latitude: 30.279393

}, {

longitude: 120.137517,

latitude: 30.279383

}],

color: "#FF0000DD",

width: 5,

dottedLine: false

}],

circles: [{

latitude: 30.279383,

longitude: 120.131441,

color: "#000000AA",

fillColor: "#000000AA",

radius: 80,

strokeWidth: 5,

}],

controls: [{

id: 5,

iconPath: '../../resources/pic/2.jpg',

position: {

left: 0,

top: 300 - 50,

width: 50,

height: 50

},

clickable: true

}],

panels:[{

id:6,

// 布局参考 map 高级定制渲染

layout: {

params:{

title:"标题栏",

bgColor:"#DC143C"

},

src:"/layout/map_callout.xml"

},

position: {

left: 0,

bottom: 0,

width: 200,

height: 84

},

}],

},

onReady(e) {

// 使用 my.createMapContext 获取 map 上下文

this.mapCtx = my.createMapContext('map')

},

getCenterLocation() {

this.mapCtx.getCenterLocation(function (res) {

console.log(res.longitude)

console.log(res.latitude)

})

},

moveToLocation() {

this.mapCtx.moveToLocation()

},

regionchange(e) {

console.log('regionchange', e);

// 注意：如果缩小或者放大了地图比例尺以后，请在 onRegionChange 函数中重新设置 data 的

// scale 值，否则会出现拖动地图区域后，重新加载导致地图比例尺又变回缩放前的大小。

if (e.type === 'end') {

this.setData({

scale: e.scale

});

}

},

markertap(e) {

console.log('marker tap', e);

},

controltap(e) {

console.log('control tap', e);

},

tap() {

console.log('tap:');

},

onPanelTap(e) {

console.log('paneltap:', e);

},

changeScale() {

this.setData({

scale: 8,

});

},

changeCenter() {

this.setData({

longitude: 113.324520,

latitude: 23.199994,

includePoints: [{

latitude: 23.199994,

longitude: 113.324520,

}],

});

},

//支持地图不接受手势事件, isGestureEnable为1 表示支持，为0表示不支持

gestureEnable() {

this.mapCtx.gestureEnable({isGestureEnable:1});

},

//地图是否显示比例尺, showsScale 为1表示显示，为0表示不显示

showsScale() {

this.mapCtx.showsScale({isShowsScale:1});

},

//地图是否显示指南针, showsCompass 为1表示显示，为0表示不显示

showsCompass() {

this.mapCtx.showsCompass({isShowsCompass:1});

},

changeMarkers() {

this.setData({

markers: [{

iconPath: "/image/green_tri.png",

id: 10,

latitude: 21.21229,

longitude: 113.324520,

width: 50,

height: 50

}],

includePoints: [{

latitude: 21.21229,

longitude: 113.324520,

}],

});

},

})

属性

属性

类型

默认值

说明

最低版本

style

String

-

内联样式 。

-

class

String

-

样式名 。

-

latitude

Number

-

中心纬度。

1.10.0

longitude

Number

-

中心经度。

1.10.0

scale

Number

16

缩放级别，取值范围为 5-18 。

1.10.0

skew

Number

0

倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角

1.20.0

rotate

Number

0

倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角

1.20.0

markers

Array

-

覆盖物，在地图上的一个点绘制图标。

1.10.0

polyline

Array

-

覆盖物，多个连贯点的集合(路线)。

1.10.0

circles

Array

-

覆盖物，圆。

1.10.0

controls

Array

-

在地图 View 之上的一个控件。

1.10.0

polygon

Array

-

覆盖物，多边形。

1.10.0

show-location

Boolean

-

是否显示带有方向的当前定位点。

1.10.0

include-points

Array

-

视野将进行小范围延伸包含传入的坐标。[{    latitude: 30.279383,    longitude: 120.131441, }]

1.10.0

include-padding

Object

-

视野在地图 padding 范围内展示。{    left:0, right:0,    top:0, bottom:0 }

1.11.0

ground-overlays

Array

-

覆盖物，自定义贴图。[{    // 右上，左下    'include-points':[{        latitude: 39.935029,        longitude: 116.384377,    },{        latitude: 39.939577,        longitude: 116.388331,    }],    image:'/image/overlay.png',    alpha:0.25,    zIndex:1 }]

1.11.0

tile-overlay

Object

-

覆盖物，网格贴图。{    url:'http://xxx',    type:0, // url类型    tileWidth:256,    tileHeight:256,    zIndex:1, }

1.11.0

custom-map-style

String

-

设置地图样式。 default：默认样式light：精简样式

1.20.0

panels

Array

-

基于 map 高级定制渲染，设置覆盖在地图上的 view

1.23.0

setting

Object

-

设置。{ // 手势 gestureEnable: 1, // 比例尺 showScale: 1, // 指南针 showCompass: 1, //双手下滑 tiltGesturesEnabled: 1, // 交通路况展示 trafficEnabled: 0, // 地图 POI 信息 showMapText: 0, // 高德地图 logo 位置 logoPosition: {  centerX: 150,   centerY: 90 } }

-

onMarkerTap

EventHandle

-

点击 Marker 时触发。{    markerId,    latitude,    longitude,  }

1.10.0

onCalloutTap

EventHandle

-

点击 Marker 对应的 callout 时触发。{    markerId,    latitude,    longitude,  }

1.10.0

onControlTap

EventHandle

-

点击 control 时触发。{    controlId }

1.10.0

onRegionChange

EventHandle

-

视野发生变化时触发。{    type: "begin/end",     latitude,    longitude,     scale }

1.10.0

onTap

EventHandle

-

点击地图时触发。{    latitude,    longitude,  }

1.10.0

onPanelTap

EventHandle

-

点击 panel 时触发{    panelId,   layoutId,}

1.23.0

markers

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

注意：

可利用该参数显示多个定位点。

地点标注不支持设置英文。

属性

说明

类型

必填

备注

最低版本

id

标记点 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。

1.23.0

rotate

旋转角度

Number

否

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

-

alpha

标注的透明度

Number

否

是否透明，默认为 1。

-

width

标注图标宽度

Number

否

默认为图片的实际宽度。

-

height

标注图标高度

Number

否

默认为图片的实际高度。

-

displayRanges

Array

标明在特定地图缩放级别下展示

否

默认所有级别下都展示；指定只在特定级别范围展示：[{  "from": 10,  "to": 15 }]

1.23.0

callout

自定义标记点上方的气泡窗口

Object

否

marker 上的气泡，地图上最多同时展示一个，绑定 onCalloutTap。{    content:"xxx" }

-

anchorX

经纬度在标注图标的锚点-横向值

Double

否

这两个值需要成对出现，anchorX 表示横向(0-1)，Y 表示竖向(0-1)，anchorX:0.5,anchorY:1表示底边中点。

-

anchorY

经纬度在标注图标的锚点-竖向值

Double

否

-

customCallout

callout 背景自定义目前只支持高德地图 style

Object

否

{ "type": 2, "descList": [{     "desc": "预计",   "descColor": "#333333" }, {     "desc": "5分钟",  "descColor": "#108EE9" }, {     "desc": "到达",   "descColor": "#333333" }], "isShow": 1 }

-

iconAppendStr

marker 图片可以来源于 View

String

否

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

-

iconAppendStrColor

marker 图片可以来源于 View，底部描述文本颜色

String

否

默认是：#33B276。

-

fixedPoint

基于屏幕位置扎点

Object

否

基于屏幕位置扎点。{    //距离地图左上角的像素数,Number    originX:100,     originY:100   }

-

markerLevel

marker 在地图上的绘制层级

Number

否

与地图上其他覆盖物统一的 Z 坐标系。

1.10.0

label

marker 上的气泡

Object

否

marker 上的气泡，地图上可同时展示多个，绑定 onMarkerTap。{    content:"Hello Label",    color:"#000000",    fontSize:12,    borderRadius:"3",    bgColor:"#ffffff",    padding:5, }

1.12.0

style

自定义 marker 样式

Object

否

自定义 marker 的样式和内容。

1.11.0

polygon

用于构造多边形对象。

属性

说明

类型

必填

备注

最低版本

points

经纬度数组

Array

是

[{ latitude: 0, longitude: 0 }]

1.10.0

color

线的颜色

String

否

用 8 位十六进制表示，后两位表示 alpha 值，如：#eeeeeeAA。

1.10.0

fillColor

填充色

String

否

用 8 位十六进制表示，后两位表示 alpha 值，如：#eeeeeeAA。

1.10.0

width

线的宽度

Number

否

-

1.10.0

displayRanges

标明在特定地图缩放级别下展示

Array

否

默认所有级别下都展示；指定只在特定级别范围展示：[{  "from": 12,  "to": 17 }]

1.23.0

polyline

用于指定一系列坐标点，从数组第一项连线至最后一项。

属性

说明

类型

必填

备注

最低版本

points

经纬度数组

Array

是

[{ latitude: 0, longitude: 0 }]

-

color

线的颜色

String

否

用 8 位十六进制表示，后两位表示 alpha 值，如：#eeeeeeAA。

-

width

线的宽度

Number

否

-

-

dottedLine

是否虚线

Boolean

否

默认 false。

-

iconWidth

使用纹理时的宽度

Number

否

-

1.11.0

zIndex

覆盖物的 Z 轴坐标

Number

-

-

1.11.0

iconPath

纹理

String

-

项目目录下的图片路径，可以用相对路径写法，以'/'开头则表示相对小程序根目录， 如果有 iconPath，会忽略 color。但是 iconPath 可以和 colorList 联合使用，这样纹理会浮在彩虹线上方，为避免覆盖彩虹线，纹理图片背景色可以设置透明。

1.11.0

colorList

彩虹线

Array

-

彩虹线，分段依据 points。例如 points 有5个点，那么 colorList 就应该传 4 个颜色值，依此类推。如果 colorList 数量小于4，那么剩下的线路颜色和最后一个颜色一样。[ "#AAAAAA", "#BBBBBB" ]

1.12.0

circles

用于在地图上显示圆。

属性

说明

类型

必填

备注

最低版本

latitude

纬度

Float

是

范围 -90 ~ 90。

1.10.0

longitude

经度

Float

是

范围 -180 ~ 180。

1.10.0

color

描边的颜色

String

否

用 8 位十六进制表示，后两位表示 alpha 值，如：#eeeeeeAA。

1.10.0

fillColor

填充颜色

String

否

用 8 位十六进制表示，后两位表示 alpha 值，如：#eeeeeeAA。

1.10.0

radius

半径(米)

Number

是

-

1.10.0

strokeWidth

描边的宽度

Number

否

-

1.10.0

controls

用于在地图上显示控件，控件不随着地图移动。

属性

说明

类型

必填

备注

最低版本

id

控件id

Number

否

控件 id,点击事件回调会返回此 id。

1.10.0

position

控件在地图的位置

Object

是

相对地图位置。

1.10.0

iconPath

显示的图标

String

是

项目目录下的图片路径，可以用相对路径写法，以'/'开头则表示相对小程序根目录。

1.10.0

clickable

是否可点击

Boolean

否

默认为 false。

1.10.0

position

控件在地图的位置，以及控件的大小。

属性

说明

类型

必填

备注

left

距离地图的左边界多远

Number

否

默认为0

top

距离地图的上边界多远

Number

否

默认为0

width

控件宽度

Number

否

默认为图片宽度

height

控件高度

Number

否

默认为图片高度

callout

自定义标记点上方的气泡窗口。

属性

说明

类型

必填

备注

content

内容

String

否

默认为空(null)

customCallout

自定义 callout 背景。

属性名

说明

类型

必填

备注

type

样式类型

Number

是

0 为黑色 style，1 为白色 style，2 为背景+文本，见下图。

time

时间

String

是

时间值。

descList

描述数组

Array

是

描述数组。{     "type": 0,    "time": "3",    "descList": [{         "desc": "点击立即打车",        "descColor": "#ffffff"     }],    "isShow": 1  }

layout

使用 map 高级定制渲染

Object

否

优先级最高, layout 对象参照 layout 定义

fixedPoint

基于屏幕位置的扎点。

属性

说明

类型

必填

备注

originX

横向像素点

Number

是

距离地图左上角的像素数值，从 0 开始。

originY

纵向像素点

Number

是

距离地图左上角的像素数值，从 0 开始。

地图组件的经纬度是必需设置的, 若未设置经纬度，则默认是北京的经纬度。

Marker 图鉴

Marker 样式优先级说明

customCallout，callout 与 label 互斥，优先级排序为：label > customCallout > callout 。

style 与 icon 互斥，优先级排序为：style > iconAppendStr；style > icon` 。

style

结构

图片示例

最低版本

{    type:1,    text1:"Style1",    icon1:'xxx',    icon2:'xxx' }

1.11.0

{    type:2,    text1:"Style2",    icon1:'xxx',    icon2:'xxx' }

1.12.0

{    type:3,    icon:xxx,  //选填    text:xxx,  //必填    color:xxx,  //默认#33B276    bgColor:xxx,  //默认#FFFFFF      gravity:"left/center/right", //默认 center    fontType:"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

错误码

错误码信息请参见：

常见问题

map 组件如何跳转到高德的 app 中去进行导航？

map 组件 optimize 属性设置了 true 后如何获取 scale 值？

optimize 属性设置了 true 后，如果需要获取 scale 值，必须要使用 onRegionChange。

map组件是否支持海外功能？

目前不支持。

如何手动在地图上绘制多边形区域？

可以使用 polygon 进行绘制。

iconAppendStr 里的文字能不能换行？

不支持。

地图组件里，设置了路径之后， 如何更改起点终点的 icon？

目前不支持更改。

android 支付宝 地图,支付宝小程序地图组件 地图·Map相关推荐

  1. uniapp使用高德地图微信小程序SDK生成地图轨迹

    一文看懂微信小程序生成地图轨迹 一.开发准备 1.下载微信小程序SDK 2.高德控制台申请相关平台key 二.html页面展示地图标签 三.引入sdk及定义数据 四.相关方法(静态生成两个点之间的轨迹 ...

  2. 微信小程序官方组件展示之地图map源码

    以下将展示微信小程序之地图map源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档. 功能描述: 地图(v2.7.0 起支持同层渲染). 小程序解决方 ...

  3. 支付宝小程序camera组件取景框绘制

    因公司需求,要将微信小程序转战到支付宝上面,恰好又是原生的写法,那只能迎着公司的需求来咯 现有一套微信的现成的源码,又不想重新写,费时又费力,这里推荐一个微信转支付宝的插件,贼好用 Antmove 小 ...

  4. 钉钉/支付宝小程序自定义组件

    钉钉/支付宝小程序自定义组件 1.新建自定义文件夹 eg:model 2.鼠标选中model 右键>新建小程序组件 输入测试组件:demo 3.新建小程序组件包含四个文件: 1.acss:组件页 ...

  5. uni-app 中微信小程序使用高德地图等第三方 SDK的方法

    获取SDK 首先在高德开放平台,注册账号并且申请相关的 key 等信息: 然后下载它的微信小程序版 SDK:微信小程序 SDK 然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生s ...

  6. 支付宝、微信小程序高频知识（汇总VS对比）

    汇聚支付宝.微信小程序多年开发经验,包括css样式隔离.小程序modal弹窗滚动穿透等,解决了很多这种大家都没解决的问题,以及对这两种常开发的小程序做了一些对比. 1.标签语法替换 关于点击事件,在微 ...

  7. 微信小程序自带地图_【小程序】微信小程序之地图功能

    基本使用 地图组件使用起来也很简单. .wxml 参数列表及说明如下: 除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件. ...

  8. 【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能

    0 小程序开发背景 1 下载官方Github项目 2 按照Echarts官网的map示例使用 3 点击事件的函数 效果图 0 小程序开发背景 前段时间在上学校的软件开发与实践B课程 因为赶上了工大百年 ...

  9. 微信小程序 腾讯地图逆地址解析reverseGeocoder之poi_options

    需求呢,是根据经纬度查附近的地点什么的,小程序自带的map组件又没有这个功能,然后就接入了腾讯地图- poi_options呢是这个方法的请求参数之一,看下文档: 有取值范围啊.page啊什么的,这里 ...

  10. 微信小程序-路线规划,地图导航功能基于高德地图API

    主要实现微信小程序中的地图路线规划和地图导航功能 小程序二维码: 更新 2018年4月18日:新增限行限号查询. 2018年5月7日:新增快递查询,模板消息发送. 准备 1.在http://lbs.a ...

最新文章

  1. 基于itchat的个人情感分析
  2. 【问题2】为什么TIME_WAIT状态需要经过2MSL(最大报文段生存时间)才能返回到CLOSE状态？
  3. 自动化测试框架 2019_2019年用于自动化的5个最佳Java测试框架
  4. 单线程写多线程读安全的结构体
  5. 互联网系统架构的演进
  6. 2018年python工作好找吗-2018年IT行业薪资大揭秘：你拖后腿了吗？
  7. flink EventTime与Window
  8. docker构建mysql容器及Navicat 远程连接
  9. list之按照中文拼音首字母排序
  10. -- 99美金和299美金的开发者证书的区别 --
  11. ubuntu安装synopsys dc报错
  12. Word操作之插入图片自动更改大小
  13. Oracle学习篇章一——基础
  14. EntityFramworkCore 配置种子数据(seeding data)
  15. 一键将手机投屏到电脑上玩，这下摸鱼更方便了
  16. python中datetime是什么意思_Python中time和datetime的区别
  17. 通知：首届CISM大赛华东赛区决赛将于30日在马鞍山举行
  18. 虚拟机的虚拟化如何开启？
  19. 【CubeMX配置STM32驱动超声波模块（HC-SR04）】
  20. 模拟信号，数字信号，基带信号，宽带信号，频带信号

热门文章

  1. java 合并两个音频_如何利用音乐合成软件将多段音频合并为一段？快速合并音频的方法...
  2. 2018-2019-1 20165301 20165304 20165314 实验二 固件程序设计
  3. oracle查看锁表语句、解锁方法
  4. redis 集群扩容方案
  5. 【Docker】MySQL 主从配置（一主一从）
  6. checkinput php,使用php检查输入字段的类型
  7. 计算机硬件关系密切,与计算机硬件关系最密切的软件是（ ）.
  8. 美国国家安全局（NSA）网络攻击主战武器NOPEN
  9. 备份服务器和文件服务器,简述NAS与文件服务器备份差异
  10. 有了这15款编程游戏，谁都可以学编程！