当前位置: 首页 > news >正文

微信小程序 地图map(电子围栏圆形和多边形)

正常情况下是没有手机上画电子围栏的,公共平台上我也没找到,所以走了一个歪点子,就是给地图添加点击事件,记录点的位置,在画到电子围栏上就是添加电子围栏了,如果只是显示电子围栏就简单了

一、多边形电子围栏

<view><map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="13" bindtap="bindtapMap" markers="{{markers}}" polyline="{{polyline}}" polygons="{{polygons}}" show-location style="width: 100%; height: 80vh;"></map><button type="primary" bindtap="removePolygons">删除围栏</button>
</view>

 字段说明:

bindtapMap:地图点击方法

creatPolygons:点图围栏绘制方法

markers:显示位置点

polygons:连线位置点


Page({data: {latitude: 24.463713,longitude: 118.082085,markers: [],polygons: [],},creatPolygons() {//创建多边形围栏if (this.data.markers.length < 3){return}let polygons = this.data.polygons;let markers = this.data.markers;let newArray = [];let params = {fillColor: "#1791fc66",strokeColor: "#FFF",strokeWidth: 2,zIndex: 3}for (let j = 0; j < markers.length; j++) {let obj = {latitude: markers[j].latitude,longitude: markers[j].longitude};newArray.push(obj);}polygons[0] = {};polygons[0].points = newArray;newArray = Object.assign(polygons[0], params);this.setData({"polygons[0]": newArray})},bindtapMap(e) {//创建标记点let tapPoint = e.detail;let markers = this.data.markerslet newContent = markers.lengthlet markerItem = {id: newContent,latitude: null,longitude: null,iconPath: '../img/point.png',width: '34px',height: '34px',rotate: 0,alpha: 1,zIndex: 3}markerItem.latitude = tapPoint.latitude;markerItem.longitude = tapPoint.longitude;markers.push(markerItem)this.setData({markers})this.creatPolygons()},removePolygons() {//删除围栏和标记this.setData({markers: [],polygons: []})},})

二、圆形电子围栏

 

<view><map bindtap="bindtapMap" markers="{{markers}}" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="13" circles="{{circles}}" style="width: 100%; height: 80vh;"></map><button type="primary" bindtap="removePolygons">删除围栏</button>
</view>

字段说明:bindtapMap:标记位置点。这和多边形就不一样了,我只需要两个点,第一个点为圆形的中心,第二个点则为圆形的边

distance:计算第一个点和第一个点的距离(以米为单位,如果要千米就 /1000)

markers:位置点显示

circles:圆形围栏显示

Page({data: {latitude:39.90923,longitude: 116.397428,markers: [],circles: [],},removePolygons() {//删除围栏和标记this.setData({markers: [],circles: []})},bindtapMap(e) {//创建标记点let tapPoint = e.detail;let markers = this.data.markerslet newContent = markers.lengthlet markerItem = {id: newContent,latitude: null,longitude: null,iconPath: '../img/point.png',width: '34px',height: '34px',rotate: 0,alpha: 1,zIndex: 3}markerItem.latitude = tapPoint.latitude;markerItem.longitude = tapPoint.longitude;if (markers.length == 0) {markers.push(markerItem)this.setData({markers})} else {console.log(this.distance(markers[0].latitude,markers[0].longitude,markerItem.latitude,markerItem.longitude))this.setData({circles: [{latitude: markers[0].latitude,longitude: markers[0].longitude,fillColor: "#7cb5ec88",color: '#FF0000DD',radius: this.distance(markers[0].latitude,markers[0].longitude,markerItem.latitude,markerItem.longitude),}],})}},distance(la1, lo1, la2, lo2) {var La1 = la1 * Math.PI / 180.0;var La2 = la2 * Math.PI / 180.0;var La3 = La1 - La2;var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));s = s * 6378.137;s = Math.round(s * 1000);return s;},onLoad(options) {},})

所遇到的问题:

1.circles内我添加level无效,导致我看不到围栏下面的地图,我也没解决他为啥不好使,所以我就给围栏添加颜色时做了点手脚( fillColor: "#7cb5ec88",color: '#FF0000DD')

相关文章:

微信小程序 地图map(电子围栏圆形和多边形)

正常情况下是没有手机上画电子围栏的&#xff0c;公共平台上我也没找到&#xff0c;所以走了一个歪点子&#xff0c;就是给地图添加点击事件&#xff0c;记录点的位置&#xff0c;在画到电子围栏上就是添加电子围栏了&#xff0c;如果只是显示电子围栏就简单了 一、多边形电子…...

Dockerfile 文件

dockerfile是一个文本文件&#xff0c;包含一条条指令&#xff0c;每条指令都会构建一层镜,一般分为四部分&#xff1a;基础镜像信息、维护者信息、镜像操作指令和容器启动时执行指令&#xff0c;#为 Dockerfile 中的注释。 docker build 基于dockerfile制作镜像 OPTIONS参数 …...

ssm学院党员管理系统源码和论文PPT

ssm学院党员管理系统源码和论文PPT002 开发工具&#xff1a;idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具&#xff1a;navcat,小海豚等 开发技术&#xff1a;java ssm tomcat8.5 选题意义、价值和目标&#xff1a; 随着鄂尔多斯应用技术学院招生规模的不断扩大&…...

文件数字水印,附一种纯文本隐写术数字水印方法

数字水印&#xff08;Digital Watermark&#xff09;是一种在数字媒体文件中嵌入隐藏信息的技术。这些数字媒体可以是图片、音频、视频或文本等。数字水印不会对原始文件造成明显的视觉或听觉变化&#xff0c;但可以在一定程度上保护知识产权&#xff0c;追踪数据来源&#xff…...

测试开发(一) 使用Vue开发chrome插件

目录 一、引言 二、功能说明 三、【配置】操作演示 四、【请求拦截】演示 不断访问博客&#x...

游戏行业实战案例 4 :在线时长分析

【面试题】某游戏数据后台设有「登录日志」和「登出日志」两张表。 「登录日志」记录各玩家的登录时间和登录时的角色等级。 「登出日志」记录各玩家的登出时间和登出时的角色等级。 其中&#xff0c;「角色id」字段唯一识别玩家。 游戏开服前两天&#xff08; 2022-08-13 至 …...

记一次图片压缩引发的生产问题

省流&#xff1a; 死循环导致没有commit&#xff08;提交事务&#xff09;&#xff0c;transaction一直没有结束。 正文&#xff1a; 调用接口报错&#xff1a; jdbc报错&#xff1a; MySQLTransactionRollbackException: Lock wait timeout exceeded; try restarting tran…...

mybatis-flex探索

mybatis古今未来 最近无意之中发现了一个非常棒的持久层框架mybatis-flex&#xff0c;迫不及待研究了一下 发现简直就是我的梦中情框&#xff0c;之前写ibatis&#xff0c;后来写mybatis&#xff0c;接着写mybatis-plus&#xff0c;接着研究mybatis-flex ibatis ibatis是apa…...

用ClickHouse 文件表引擎快速查询分析文件数据

有时我们需要快速查询分析文件数据&#xff0c;正常流程需要在数据库中创建表&#xff0c;然后利用工具或编码导入数据&#xff0c;这时才能在数据库中查询分析。利用ClickHouse文件引擎可以快速查询文件数据。本文首先介绍ClickHouse文件引擎&#xff0c;然后介绍如何快速实现…...

esp8266httpclient_get_post使用

esp8266httpclient_get_post使用 #include<ESP8266WiFi.h> #include <ESP8266HTTPClient.h>//const char *ssid "AxxxIFI"; const char *password "xxxs879xxx68";const char* ssid "IT-nxxxang";const char* URL "http://…...

【Spring】创建一个Spring项目与Bean对象的存储

目录 一、创建Spring项目 1、创建Maven项目 2、配置maven国内源 3、引入spring依赖 4、添加启动类 二、将Bean对象存储到Spring&#xff08;IoC容器&#xff09; 1、创建Bean对象 2、将Bean存储到spring&#xff08;容器&#xff09;中 3、获取Bean对象 3.1、Applicatio…...

Docker的入门与使用

什么是Docker&#xff1f; docker官网 简介与概述 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#x…...

Smart HTML Elements 16.1 Crack

Smart HTML Elements 是一个现代 Vanilla JS 和 ES6 库以及下一代前端框架。企业级 Web 组件包括辅助功能&#xff08;WAI-ARIA、第 508 节/WCAG 合规性&#xff09;、本地化、从右到左键盘导航和主题。与 Angular、ReactJS、Vue.js、Bootstrap、Meteor 和任何其他框架集成。 智…...

[分享]STM32G070 串口 乱码 解决方法

硬件 NUCLEO-G070RB 工具 cubemx 解决方法 7bit 改为 8bit printf 配置方法 添加头文件 #include <stdio.h> 添加重定向代码 #ifdef __GNUC__#define PUTCHAR_PROTOTYPE int __io_putchar(int ch)#else#define PUTCHAR_PROTOTYPE int fputc(int ch, FILE *f)#endi…...

[代码案例]学会python读写各类文件的操作(excel,txt,mat)

简介 python读写三类文件 excel文件 txt文件 mat文件 代码 """Description: python 读写各类文件 操作 """ import scipy as scipy from scipy.io import loadmat import xlwt import xlrd 读写excel文件workbook xlrd.open_workbook(test1.…...

【LeetCode】练习习题集【4月 - 7 月】

LEETCODE习题集【4月-7月总结】 简单 数组部分 1.重复数 题目&#xff1a; 在一个长度u为 n 的数组 nums 里的所有数字都在 0&#xff5e;n-1 的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字重复了&#xff0c;也不知道每个数字重复了几次。请找出数组中…...

C# 子类强制转换为父类异常,引出的C#Dll加载机制,以及同类名同命名空间同dll程序集在C#中是否为同一个类的研究。

已知&#xff0c;子类B继承自父类A&#xff0c;但是在代码运行时&#xff0c;B类强制转换为A类&#xff0c;却报代码转换异常。 很奇怪的问题吧&#xff0c;不过这个也是难得机会&#xff0c;去研究C#运行的底层原理。 下面是报错的代码片段。 string className _shapeRefle…...

Go语言进阶

个人笔记&#xff0c;大量摘自Go语言高级编程、Go|Dave Cheney等 更新 go get -u all 在非go目录运行go install golang.org/x/tools/goplslatest更新go tools&#xff1a;在go目录运行go get -u golang.org/x/tools/...&#xff0c;会更新bin目录下的应用&#xff1b; 运行…...

Java的枚举

枚举 对应英文(enumeration, 简写enum) 枚举是一组常量的集合&#xff0c;属于一种特殊的类&#xff0c;里面只包含一组有限的特定的对象。 自定义类实现枚举 1.不需要提供setXxx方法&#xff0c;因为枚举对象值通常为只读. 2.对枚举对象/属性使用 final static共同修饰…...

Pytest测试框架3

目录&#xff1a; pytest结合数据驱动-yamlpytest结合数据驱动-excelpytest结合数据驱动-csvpytest结合数据驱动-jsonpytest测试用例生命周期管理&#xff08;一&#xff09;pytest测试用例生命周期管理&#xff08;二&#xff09;pytest测试用例生命周期管理&#xff08;三&a…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...