#yyds干货盘点#愚公系列2022年11月 微信小程序-地图的使用之点聚合
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点#愚公系列2022年11月 微信小程序-地图的使用之点聚合相关的知识,希望对你有一定的参考价值。
前言
地图基础属性:
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
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 |
marker
标记点用于在地图上显示标记的位置
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
id | 标记点 id | number | 否 | marker 点击事件回调会返回此 id。 | |
clusterId | 聚合簇的 id | Number | 否 | 自定义点聚合簇效果时使用 | |
joinCluster | 是否参与点聚合 | Boolean | 否 | 默认不参与点聚合 | |
latitude | 纬度 | number | 是 | 浮点数,范围 -90 ~ 90 | |
longitude | 经度 | number | 是 | 浮点数,范围 -180 ~ 180 | |
title | 标注点名 | string | 否 | 点击时显示,callout 存在时将被忽略 | |
zIndex | 显示层级 | number | 否 | 2.3.0 | |
iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径,支持网络路径、本地路径、代码包路径(2.3.0) | |
rotate | 旋转角度 | number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 | |
alpha | 标注的透明度 | number | 否 | 默认 1,无透明,范围 0 ~ 1 | |
width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 | |
height | 标注图标高度 | number/string | 否 | 默认为图片实际高度 | |
callout | 标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表,可识别换行符。 | 1.2.0 |
customCallout | 自定义气泡窗口 | Object | 否 | 支持的属性见下表 | |
label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表,可识别换行符。 | 1.2.0 |
anchor | 经纬度在标注图标的锚点,默认底边中点 | Object | 否 | x, y,x 表示横向(0-1),y 表示竖向(0-1)。x: .5, y: 1 表示底边中点 | 1.2.0 |
aria-label | 无障碍访问,(属性)元素的额外描述 | string | 否 | 2.5.0 |
marker 上的气泡 callout
属性 | 说明 | 类型 | 最低版本 |
---|---|---|---|
content | 文本 | string | 1.2.0 |
color | 文本颜色 | string | 1.2.0 |
fontSize | 文字大小 | number | 1.2.0 |
borderRadius | 边框圆角 | number | 1.2.0 |
borderWidth | 边框宽度 | number | 2.3.0 |
borderColor | 边框颜色 | string | 2.3.0 |
bgColor | 背景色 | string | 1.2.0 |
padding | 文本边缘留白 | number | 1.2.0 |
display | BYCLICK:点击显示; ALWAYS:常显 | string | 1.2.0 |
textAlign | 文本对齐方式。有效值: left, right, center | string | 1.6.0 |
anchorX | 横向偏移量,向右为正数 | number | 2.11.0 |
anchorY | 纵向偏移量,向下为正数 | number | 2.11.0 |
marker 上的自定义气泡 customCallout
customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制,灵活度更高。
属性 | 说明 | 类型 | 最低版本 |
---|---|---|---|
display | BYCLICK:点击显示; ALWAYS:常显 | string | 2.12.0 |
anchorX | 横向偏移量,向右为正数 | number | 2.12.0 |
anchorY | 纵向偏移量,向下为正数 | number | 2.12.0 |
marker 上的气泡 label
属性 | 说明 | 类型 | 最低版本 |
---|---|---|---|
content | 文本 | string | 1.2.0 |
color | 文本颜色 | string | 1.2.0 |
fontSize | 文字大小 | number | 1.2.0 |
x | label的坐标(废弃) | number | 1.2.0 |
y | label的坐标(废弃) | number | 1.2.0 |
anchorX | label的坐标,原点是 marker 对应的经纬度 | number | 2.1.0 |
anchorY | label的坐标,原点是 marker 对应的经纬度 | number | 2.1.0 |
borderWidth | 边框宽度 | number | 1.6.0 |
borderColor | 边框颜色 | string | 1.6.0 |
borderRadius | 边框圆角 | number | 1.6.0 |
bgColor | 背景色 | string | 1.6.0 |
padding | 文本边缘留白 | number | 1.6.0 |
textAlign | 文本对齐方式。有效值: left, right, center | string | 1.6.0 |
一、点聚合
1.wxml
<map
id="mapId"
class="map"
latitude="latitude"
longitude="longitude"
bindmarkertap="onMarkerTap"
bindcallouttap="onCalloutTap"
bindlabeltap="onLabelTap"
></map>
<view class="btn-area service">
<button bindtap="removeMarkers">
移除参与聚合点的marker
</button>
<button bindtap="addMarkers">
添加聚合点marker
</button>
</view>
2.js
const app = getApp()
const img = ../image/location.png
Page(
data:
latitude: 23.099994,
longitude: 113.324520,
,
onLoad: function ()
this.mapCtx = wx.createMapContext(mapId)
this.mapCtx.on(markerClusterClick, res =>
console.log(markerClusterClick, res)
)
// 使用默认聚合效果时可注释下一句
this.bindEvent()
,
bindEvent()
this.mapCtx.initMarkerCluster(
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res)
console.log(initMarkerCluster, res)
)
// enableDefaultStyle 为 true 时不会触发改事件
this.mapCtx.on(markerClusterCreate, res =>
console.log(clusterCreate, res)
const clusters = res.clusters
const markers = clusters.map(cluster =>
const
center,
clusterId,
markerIds
= cluster
return
...center,
width: 0,
height: 0,
clusterId, // 必须
label:
content: markerIds.length + ,
fontSize: 20,
width: 60,
height: 60,
bgColor: #00ff00,
borderRadius: 30,
textAlign: center,
anchorX: 0,
anchorY: -30,
)
this.mapCtx.addMarkers(
markers,
clear: false,
complete(res)
console.log(clusterCreate addMarkers, res)
)
)
,
addMarkers()
const marker =
id: 1,
iconPath: img,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label:
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: #ffffff
const positions = [
latitude: 23.099994,
longitude: 113.324520,
,
latitude: 23.099994,
longitude: 113.322520,
,
latitude: 23.099994,
longitude: 113.326520,
,
latitude: 23.096994,
longitude: 113.329520,
]
const markers = []
positions.forEach((p, i) =>
const newMarker = Object.assign(marker, p)
newMarker.id = i + 1
newMarker.label.content = `label $i + 1`
markers.push(newMarker)
this.mapCtx.addMarkers(
markers,
clear: false,
complete(res)
console.log(addMarkers, res)
)
)
,
removeMarkers()
this.mapCtx.addMarkers(
clear: true,
markers: []
)
,
onMarkerTap(e)
console.log(@@ markertap, e)
,
onCalloutTap(e)
console.log(@@ onCalloutTap, e)
,
onLabelTap(e)
console.log(@@ labletap, e)
)
3.实际效果
以上是关于#yyds干货盘点#愚公系列2022年11月 微信小程序-地图的使用之点聚合的主要内容,如果未能解决你的问题,请参考以下文章
#yyds干货盘点#愚公系列2022年11月 微信小程序-导航(功能页)
#yyds干货盘点#愚公系列2022年11月 微信小程序-地图的使用之点聚合
#yyds干货盘点#愚公系列2022年11月 微信小程序-Flex布局详解
#yyds干货盘点#愚公系列2022年11月 微信小程序-icon图标详解