#yyds干货盘点#愚公系列2022年11月 微信小程序-地图的使用之线聚合

Posted 2022-11-22

前言

地图基础属性：

属性	类型	默认值	必填	说明	最低版本
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 ~ 360, 地图正北和设备 y 轴角度的夹角	2.5.0
skew	number		否	倾斜角度，范围 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.实际效果