微信小程序 地图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')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/83380.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器人CPP编程基础-01第一个程序Hello World

很多课程先讲C/C或者一些其他编程课&#xff0c;称之为基础课程。然后到本科高年级进行机器人专业课学习&#xff0c;这样时间损失非常大&#xff0c;效率非常低。 C/单片机/嵌入式/ROS等这些编程基础可以合并到一门课中进行实现&#xff0c;这些素材已经迭代三轮以上&#xf…

ctfshow web93-98

web93 打开环境是一个代码审计题目 简单分析就是输入一个变量num&#xff0c;其值不能等于4476与包含字母&#xff0c;但是他的值需要为4476 函数intval作用为获取变量的整数值&#xff0c;第二个参数的意思是进制&#xff0c;默认为10进制。题目参数为0&#xff0c;就根据变…

享元模式(C++)

定义 运用共享技术有效地支持大量细粒度的对象。 使用场景 在软件系统采用纯粹对象方案的问题在于大量细粒度的对象会很快充斥在系统中&#xff0c;从而带来很高的运行时代价——主要指内存需求方面的代价。如何在避免大量细粒度对象问题的同时&#xff0c;让外部客户程序仍…

立即开始使用 3D 图像

一、说明 这个故事介绍了使用这种类型的数据来训练机器学习3D模型。特别是&#xff0c;我们讨论了Kaggle中可用的MNIST数据集的3D版本&#xff0c;以及如何使用Keras训练模型识别3D数字。 3D 数据无处不在。由于我们希望构建AI来与我们的物理世界进行交互&#xff0c;因此使用3…

8月9日上课内容 nginx负载均衡

负载均衡工作当中用的很多的&#xff0c;也是面试会问的很重要的一个点 负载均衡&#xff1a;通过反向代理来实现&#xff08;nginx只有反向代理才能做负载均衡&#xff09; 正向代理的配置方法&#xff08;用的较少&#xff09; 反向代理的方式&#xff1a;四层代理与七层代…

【多重信号分类】超分辨率测向方法——依赖于将观测空间分解为噪声子空间和源/信号子空间的方法具有高分辨率(HR)并产生准确的估计(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

牛客小白月赛75C题题解

文章目录 方豆子问题建模问题分析代码 方豆子 问题建模 给定一个整数n&#xff0c;要求输出n级好豆豆&#xff0c;n级好豆豆由3个n-1级好豆豆和1个n-1级坏豆豆组成&#xff0c;已经给出了1级好豆豆和1级坏豆豆。 问题分析 由于最终的豆豆是由其上一级的豆豆产生的&#xff0…

单片机外部晶振故障后自动切换内部晶振——以STM32为例

单片机外部晶振故障后自动切换内部晶振——以STM32为例 作者日期版本说明Dog Tao2023.08.02V1.0发布初始版本 文章目录 单片机外部晶振故障后自动切换内部晶振——以STM32为例背景外部晶振与内部振荡器STM32F103时钟系统STM32F407时钟系统 代码实现系统时钟设置流程时钟源检测…

ArcGIS Pro实践技术应用——暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用全流程科研能力提升

查看原文>>>ArcGIS Pro实践技术应用——暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合能力 本文将利用ArcGIS Pro 将您的 GIS 工作组织到工程中&#xff0c;您可以使用 ArcGIS Pro 映射 2D 和 3D 数据。借助 ArcGIS Pro&#xff…

float 属性的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ float 是什么&#xff1f;⭐ float 属性值⭐ 使用 float 的注意事项&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门…

力扣hot100刷题记录

二刷hot100&#xff0c;坚持每天打卡&#xff01;&#xff01;&#xff01; 1. 两数之和 // 先求差&#xff0c;再查哈希表 public int[] twoSum(int[] nums, int target) {Map<Integer,Integer> map new HashMap<>();for(int i 0;i<nums.length;i){int key …

51单片机(普中HC6800-EM3 V3.0)实验例程软件分析 实验四 蜂鸣器

目录 前言 一、原理图及知识点介绍 1.1、蜂鸣器原理图&#xff1a; 二、代码分析 前言 第一个实验:51单片机&#xff08;普中HC6800-EM3 V3.0&#xff09;实验例程软件分析 实验一 点亮第一个LED_ManGo CHEN的博客-CSDN博客 第二个实验:51单片机&#xff08;普中HC6800-EM…

《2023年中国企业数字化转型发展白皮书》发布

导读 本报告主要采用市场调查、行业深度访谈、桌面研究等方法&#xff0c;并使用艾媒咨询旗下各大数据计算系统和相关计算模型。 对部分相关的公开信息进行筛选&#xff0c;通过对行业专家、相关企业与网民进行深度访谈&#xff0c;了解相关行业主要情况&#xff0c;获得相应…

解决Qt的列表加载大量数据卡顿的问题

问题概述 本人在使用QListView插入大量数据时&#xff0c;界面卡顿十分严重。数据量大概只有上千左右&#xff0c;但是每个Item的内容比较多。当数据不停地插入一段时间后&#xff0c;卡顿到鼠标的移动都有点困难。 解决思路 QListView是典型的MVC思想的产物。界面呈现出来的数…

创建型模式-单例模式

文章目录 一、创建型模式1. 单例设计模式1.1 单例模式的结构1.2 单例模式的实现&#xff08;1&#xff09;饿汉式-方式1&#xff08;静态变量方式&#xff09;&#xff08;2&#xff09;饿汉式-方式2&#xff08;静态代码块方式&#xff09;&#xff08;3&#xff09;懒汉式-方…

vue+element 下载压缩包和导出

export function goodsInspectionReportDwnloadZip (params) {return axios({url: "/warehouse-entry-server/v1/goodsInspectionReport/downloadZip",method: "get",params,responseType: "blob"}) } //下载handleDownloadFile() {if (!this.$r…

AMBA总线(AHB)

1.AMBA AMBA(Advanced Microcontroller Bus Architecture)高级微控制器总线结构&#xff0c;定义了用于设计高性能嵌入式微控制器的片上通信标准。   AMBA规范中定义了三种不同的总线&#xff1a;   &#xff08;1&#xff09;高级高性能总线&#xff08;Advanced High-per…

基于nodejs+vue+uniapp微信小程序的短视频分享系统

开发语言 node.js 框架&#xff1a;Express 前端:Vue.js 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发软件&#xff1a;VScode 3.1小程序端 用户注册页面&#xff0c;输入用户的个人信息点击注册即可。 注册完成后会返回到登录页面&#xff0c;用户输入自己注…

无人车沿着指定线路自动驾驶与远程控制的实践应用

有了前面颜色识别跟踪的基础之后&#xff0c;我们就可以设定颜色路径&#xff0c;让无人车沿着指定线路做自动驾驶了&#xff0c;视频&#xff1a;PID控制无人车自动驾驶 有了前几章的知识铺垫&#xff0c;就比较简单了&#xff0c;也是属于颜色识别的一种应用&#xff0c;主要…

神码ai火车头伪原创设置【php源码】

大家好&#xff0c;给大家分享一下python编写学生信息管理系统的学生信息保存在哪里&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 火车头采集ai伪原创插件截图&#xff1a; 要求描述&#xff1a; 学生的信息包括&#xff1a;学号&#…