【愚公系列】2022年04月 微信小程序-地图的使用之面聚合
文章目录
前言
地图基础属性：
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
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. | 否 | 标记点 | 1.0.0 | |
covers | Array. | 否 | 即将移除，请使用 markers | 1.0.0 | |
polyline | Array. | 否 | 路线 | 1.0.0 | |
circles | Array. | 否 | 圆 | 1.0.0 | |
controls | Array. | 否 | 控件（即将废弃，建议使用 cover-view 代替） | 1.0.0 | |
include-points | Array. | 否 | 缩放视野以包含所有给定的坐标点 | 1.0.0 | |
show-location | boolean | false | 否 | 显示带有方向的当前定位点 | 1.0.0 |
polygons | Array. | 否 | 多边形 | 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 |
polygon
指定一系列坐标点，根据 points 坐标数据生成闭合多边形
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
|---|---|---|---|---|---|
dashArray | 边线虚线 | Array | 否 | 默认值 [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.实际效果
腾讯云开发者
