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

Posted 2022-11-23

前言

地图基础属性：

属性	类型	默认值	必填	说明	最低版本
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

polygon

指定一系列坐标点，根据 points 坐标数据生成闭合多边形

属性	说明	类型	必填	备注	最低版本
dashArray	边线虚线	Array<number>	否	默认值 [0, 0] 为实线，[10, 10]表示十个像素的实线和十个像素的空白（如此反复）组成的虚线	2.22.0
points	经纬度数组	array	是	[latitude: 0, longitude: 0]	2.3.0
strokeWidth	描边的宽度	number	否		2.3.0
strokeColor	描边的颜色	string	否	十六进制	2.3.0
fillColor	填充颜色	string	否	十六进制
zIndex	设置多边形 Z 轴数值	number	否		2.3.0
level	压盖关系	string	否	默认为 abovelabels	2.14.0

一、面聚合

1.wxml

<map id="mapp" latitude="latitude" longitude="longitude" scale="16" 
	 show-compass="true"show-scale="true" 	
	 polygons="polygons">
</map>

2.js

Page(
  data: 
    polygons: [
      strokeWidth: 1,
      strokeColor: #000000,
      fillColor: #ffffff,
      points: [
        
          latitude: "23.08288402644847",
          longitude: "113.30218549997039"
        ,
        
          latitude: "23.085168159298544",
          longitude: "113.33830101347007"
        ,
        
          latitude: "23.046124888637255",
          longitude: "113.34326689639329"
        ,
        
          latitude: "23.04654030072217",
          longitude: "113.28683640541976"
        ,
        
          latitude: "23.081845770334308",
          longitude: "113.28299913608771"
        ,
        
          latitude: "23.083506975476055",
          longitude: "113.30286266433609"
        ,
        
          latitude: "23.08288402644847",
          longitude: "113.30218549997039"
        
      ]
    ],
    latitude: 23.08288402644847,
    longitude: 113.30218549997039
  
)

3.wxss

#mapp 
	height: 1000rpx; 
	width: 100%;

4.实际效果