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

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

时间:2022-11-22 20:00:41浏览次数:50  
标签:yyds 1.0 微信 number longitude latitude boolean 2022 2.3

前言

地图基础属性:

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

在这里插入图片描述

标签:yyds,1.0,微信,number,longitude,latitude,boolean,2022,2.3
From: https://blog.51cto.com/u_15437432/5878418

相关文章

  • #yyds干货盘点# 动态规划专题:兑换零钱
    1.简述:描述给定数组arr,arr中所有的值都为正整数且不重复。每个值代表一种面值的货币,每种面值的货币可以使用任意张,再给定一个aim,代表要找的钱数,求组成aim的最少货币数。如果......
  • #yyds干货盘点# LeetCode 腾讯精选练习 50 题:删除链表中的节点
    题目:有一个单链表的 head,我们想删除它其中的一个节点 node。给你一个需要删除的节点 node 。你将 无法访问 第一个节点 head。链表的所有值都是唯一的,并且保证给定......
  • YACS 2022年11月月赛 乙组 T1 数对统计 题解
    好久没更了,闲话一句,我的初赛成绩只有$71.5$,$76$才能进$NOIP$,所以就更一篇吧首先先考虑暴力算法,枚举两个数,设这两个数为$x$和$y$,如果$f[x][y]=false$,那就标记为$t......
  • 【每日诗词】2022-11-20
    送别宋-李叔同长亭外,古道边,芳草碧连天。晚风抚柳笛声残,夕阳山外山。天之涯,地之角,之交半零落。一壶浊酒尽余欢,今宵别梦寒。长亭外,古道边,芳草碧连天。问君此去几时来,......
  • 2022CSP-J
    A乘方签到题#include<iostream>#include<cstdio>#include<cmath>#include<cstring>#include<algorithm>#include<queue>#definefile(s)freopen(s".in",......
  • 我国首个关保国家标准GB/T 39204-2022正式发布
    近日,市场监管总局(标准委)发布公告,正式批准包括《信息安全技术关键信息基础设施安全保护要求》在内的2项国家标准。据悉,此次发布的GB/T39204-2022《信息安全技术关键信息基......
  • 知行之桥EDI系统2022版Tomcat部署
    1.首先需要下载Tomcat,可在Tomcat官网获取,本部署步骤以apache-tomcat-9.0.67.tar.gz为例,通过XFTP将该包放在服务器上的指定位置,如/opt/test进入/opt/test文件夹后,在命令行执......
  • 20221122-Python格式化字符串
    1.格式化字符串       ......
  • # VS2022手动引入easyX绘制工具
    1.下载EasyX_20220901.exe安装包,手动修改后缀名为7z,解压2、找到vs的安装目录\MicrosoftVisualStudio\2022\Professional\VC\Auxiliary\VS3、把前面解压出来的include......
  • 20221121-Python-对象的方法
    1.对象方法的概念:               ......