【愚公系列】2022年04月 微信小程序-地图的使用之线聚合
【摘要】 前言地图基础属性：属性类型默认值必填说明最低版本longitudenumber是中心经度1.0.0latitudenumber是中心纬度1.0.0scalenumber16否缩放级别，取值范围为3-201.0.0min-scalenumber3否最小缩放级别2.13.0max-scalenumber20否最大缩放级别2.13.0markersArray.<marker>否标记点1.0.0c...
前言
地图基础属性：
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| longitude | number | 是 | 中心经度 | 1.0.0 | |
| latitude | number | 是 | 中心纬度 | 1.0.0 | |
| scale | number | 16 | 否 | 缩放级别，取值范围为3-20 | 1.0.0 |
| min-scale | number | 3 | 否 | 最小缩放级别 | 2.13.0 |
| max-scale | number | 20 | 否 | 最大缩放级别 | 2.13.0 |
| markers | Array.<marker> | 否 | 标记点 | 1.0.0 | |
| covers | Array.<cover> | 否 | 即将移除，请使用 markers | 1.0.0 | |
| polyline | Array.<polyline> | 否 | 路线 | 1.0.0 | |
| circles | Array.<circle> | 否 | 圆 | 1.0.0 | |
| controls | Array.<control> | 否 | 控件（即将废弃，建议使用 cover-view 代替） | 1.0.0 | |
| include-points | Array.<point> | 否 | 缩放视野以包含所有给定的坐标点 | 1.0.0 | |
| show-location | boolean | false | 否 | 显示带有方向的当前定位点 | 1.0.0 |
| polygons | Array.<polygon> | 否 | 多边形 | 2.3.0 | |
| subkey | string | 否 | 个性化地图使用的key | 2.3.0 | |
| layer-style | number | 1 | 否 | 个性化地图配置的 style，不支持动态修改 | |
| rotate | number | 0 | 否 | 旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 | 2.5.0 |
| skew | number | 0 | 否 | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 | 2.5.0 |
| enable-3D | boolean | false | 否 | 展示3D楼块 | 2.3.0 |
| show-compass | boolean | false | 否 | 显示指南针 | 2.3.0 |
| show-scale | boolean | false | 否 | 显示比例尺，工具暂不支持 | 2.8.0 |
| enable-overlooking | boolean | false | 否 | 开启俯视 | 2.3.0 |
| enable-zoom | boolean | true | 否 | 是否支持缩放 | 2.3.0 |
| enable-scroll | boolean | true | 否 | 是否支持拖动 | 2.3.0 |
| enable-rotate | boolean | false | 否 | 是否支持旋转 | 2.3.0 |
| enable-satellite | boolean | false | 否 | 是否开启卫星图 | 2.7.0 |
| enable-traffic | boolean | false | 否 | 是否开启实时路况 | 2.7.0 |
| enable-poi | boolean | true | 否 | 是否展示 POI 点 | 2.14.0 |
| enable-building | boolean | 否 | 是否展示建筑物 | 2.14.0 | |
| setting | object | 否 | 配置项 | 2.8.2 | |
| bindtap | eventhandle | 否 | 点击地图时触发，2.9.0起返回经纬度信息 | 1.0.0 | |
| bindmarkertap | eventhandle | 否 | 点击标记点时触发，e.detail = {markerId} | 1.0.0 | |
| bindlabeltap | eventhandle | 否 | 点击label时触发，e.detail = {markerId} | 2.9.0 | |
| bindcontroltap | eventhandle | 否 | 点击控件时触发，e.detail = {controlId} | 1.0.0 | |
| bindcallouttap | eventhandle | 否 | 点击标记点对应的气泡时触发e.detail = {markerId} | 1.2.0 | |
| bindupdated | eventhandle | 否 | 在地图渲染更新完成时触发 | 1.6.0 | |
| bindregionchange | eventhandle | 否 | 视野发生变化时触发， | 2.3.0 | |
| bindpoitap | eventhandle | 否 | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | 2.3.0 | |
| bindanchorpointtap | eventhandle | 否 | 点击定位标时触发，e.detail = {longitude, latitude} | 2.13.0 |
polyline
指定一系列坐标点，从数组第一项连线至最后一项。绘制彩虹线时，需指定不同分段的颜色，如 points 包含 5 个点，则 colorList 应传入 4 个颜色值；若 colorList 长度小于 points.length - 1，则剩下的分段颜色与最后一项保持一致。
| 属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | |
| color | 线的颜色 | string | 否 | 十六进制 | |
| colorList | 彩虹线 | array | 否 | 存在时忽略 color 值 | 2.13.0 |
| width | 线的宽度 | number | 否 | ||
| dottedLine | 是否虚线 | boolean | 否 | 默认 false | |
| arrowLine | 带箭头的线 | boolean | 否 | 默认 false，开发者工具暂不支持该属性 | 1.2.0 |
| arrowIconPath | 更换箭头图标 | string | 否 | 在 arrowLine 为 true 时生效 | 1.6.0 |
| borderColor | 线的边框颜色 | string | 否 | 1.2.0 | |
| borderWidth | 线的厚度 | number | 否 | 1.2.0 | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | 2.14.0 |
| textStyle | 文字样式 | TextStyle | 否 | 折线上文本样式 | 2.22.0 |
| segmentTexts | 分段文本 | Array<SegmentText> | 否 | 折线上文本内容和位置 | 2.22.0 |
SegmentText
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 名称 | string | ‘’ |
| startIndex | 起点 | number | |
| endIndex | 终点 | number |
TextStyle
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| textColor | 文本颜色 | string | #000000 |
| strokeColor | 描边颜色 | string | #ffffff |
| fontSize | 文本大小 | number | 14 |
level
字段表示与其它地图元素的压盖关系，可选值如下：
| 值 | 说明 | 最低版本 |
|---|---|---|
| abovelabels | 显示在所有 POI 之上 | 2.14.0 |
| abovebuildings | 显示在楼块之上 POI 之下 | 2.14.0 |
| aboveroads | 显示在道路之上楼块之下 | 2.14.0 |
一、线聚合
1.wxml
<map id="mapp" latitude="37.48205260" longitude="121.44577861" scale="16"
show-compass="true"show-scale="true"
polyline="{{polyline}}">
</map>
2.js
Page({
data: {
polyline: [{
points: [{
longitude: 121.44577861,
latitude: 37.48205260
}, {
longitude: 121.44611657,
latitude: 37.48207388
}, {
longitude: 121.44725382,
latitude: 37.48224841
}, {
longitude: 121.44766152,
latitude: 37.48237186
},{
longitude: 121.4475274100,
latitude: 37.4827039000
},{
longitude: 121.44748986,
latitude: 37.48299336
},{
longitude: 121.4476454300,
latitude: 37.4831679000
},{
longitude: 121.4478063600,
latitude: 37.4831381000
},{
longitude: 121.4479565600,
latitude: 37.4831295800
},{
longitude: 121.4480263000,
latitude: 37.4831636400
},{
longitude: 121.44820869,
latitude: 37.48330837
}
],
color: "#33c9FFDD",
width: 3,
dottedLine: true
}]
}
})
3.wxss
#mapp {
height: 1000rpx;
width: 100%;
}
4.实际效果
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）