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

时间:2022-11-22 19:54:54

前言

地图基础属性:

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

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