百度地图点标记加调用
先看效果
PHP代码
<?phpnamespace kds_addons\edata\controller;use think\addons\Controller;
use think\Db;class Maps extends Controller
{// 经纬度计算面积function calculate_area($points){$totalArea = 0;$numPoints = count($points);if ($numPoints > 2) {for ($i = 0; $i < $numPoints; $i++) {$j = ($i + 1) % $numPoints;$x1 = $points[$i]["lng"];$y1 = $points[$i]["lat"];$x2 = $points[$j]["lng"];$y2 = $points[$j]["lat"];$totalArea += deg2rad($x2 - $x1) * (2 + sin(deg2rad($y1)) + sin(deg2rad($y2)));}$totalArea *= 6378137 * 6378137 / 2;}return abs($totalArea);}// 地图设置public function set_pi(){$times = time();$id = intval(input("id"));$this->assign("id", $id);if (request()->isPost()) {$l2_json = trim(input("l2_json"));// dump($l2_json);$l2_json = htmlspecialchars_decode($l2_json);// $l2_json = stripslashes($l2_json);$l2_arr = json_decode($l2_json, true);// dump($l2_arr);Db::name("land_l2")->where("land_id", $id)->delete(); //删除数据$datas_ia = [];foreach ($l2_arr as $key => &$value) {// dump($value);$value["land_id"] = $id;$value["create_time"] = $times;ksort($value); //数组按键名排序$datas_ia[] = $value;}$datas_ia = array_values($datas_ia); //只保留数组中的valueDb::name("land_l2")->insertAll($datas_ia); //插入多条数据// 计算中心// 经度$lng_sum = Db::name("land_l2")->where("land_id", $id)->sum("lng");$lng_nu = Db::name("land_l2")->where("land_id", $id)->count("lng");$datas["lng"] = $lng_sum / $lng_nu;// 纬度$lat_sum = Db::name("land_l2")->where("land_id", $id)->sum("lat");$lat_nu = Db::name("land_l2")->where("land_id", $id)->count("lat");$datas["lat"] = $lat_sum / $lat_nu;// 计算面积$lists_l2 = Db::name("land_l2")->field(["lng", "lat"])->where("land_id", $id)->select();$area = $this->calculate_area($lists_l2);$datas["area_m2"] = $area;$datas["area_gq2"] = $area / 10000; //平方米转换为平方公顷$datas["not_gp2"] = $area / 10000; //平方米转换为平方公顷// 更新数据Db::name("land")->where("id", $id)->update($datas);$res = [];$res["code"] = 0;return json($res);}// 获取所有标记点$lists = Db::name("land_l2")->field(["lng", "lat"])->where("land_id", $id)->order("id asc")->select();$this->assign("lists", $lists);// 获取中心坐标$first = reset($lists);$this->assign("lng", $first["lng"]);$this->assign("lat", $first["lat"]);return $this->fetch();// return $this->fetch(request()->action() . "_qq");}// 地图查看public function se_pi(){$id = intval(input("id"));$this->assign("id", $id);// 获取所有标记点$lists = Db::name("land_l2")->field(["lng", "lat"])->where("land_id", $id)->order("id asc")->select();$this->assign("lists", $lists);// 获取中心坐标$first = reset($lists);$this->assign("lng", $first["lng"]);$this->assign("lat", $first["lat"]);return $this->fetch();// return $this->fetch(request()->action() . "_qq");}
}选点
<html><head><meta charset="utf-8"><title></title><meta name="renderer"content="webkit"><meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><link rel="stylesheet"href="/yunqikds_static/iconfont/iconfont.css"><script src="/yunqikds_static/iconfont/iconfont.js"></script><link rel="stylesheet"href="/yunqikds_static/layuiadmin/layui/css/layui.css"media="all"><script src="/yunqikds_static/layuiadmin/layui/layui.js"></script><script src="/yunqikds_static/js/jquery-1.10.2.min.js"></script></head><body><div id="container"></div><ul class="drawing-panel"><li class="btn"onclick="map_tog()">切换</li><li class="btn"onclick="map_save()">保存</li></ul><script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=xxx"></script><script type="text/javascript"src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script><script type="text/javascript">$(function () {layui.use(["layer",], function () {layer = layui.layer;});});var is_add = true; //解决单击添加和删除冲突的问题var map = new BMapGL.Map("container", {mapType: BMAP_SATELLITE_MAP, //卫星底图// mapType: BMAP_NORMAL_MAP, //矢量底图});`{if $lng&&$lat}`;var c_pi = new BMapGL.Point(parseFloat(`{$lng}`), parseFloat(`{$lat}`));`{else}`;var c_pi = "乐都区";`{/if}`;map.centerAndZoom(c_pi, 16);map.enableScrollWheelZoom(true);map.disableDoubleClickZoom(); //设置是否可以双击放大// 添加标记点function p_add(lat, lng, i = null) {lat = parseFloat(lat);lng = parseFloat(lng);var pis = new BMapGL.Point(lng, lat);var marker = new BMapGL.Marker(pis, {enableDragging: true,});if (i) {// console.log(i);var opts = {position: pis, // 指定文本标注所在的地理位置offset: new BMapGL.Size(0, 0) // 设置文本偏移量};var label = new BMapGL.Label(i, opts);// 自定义文本标注样式label.setStyle({color: "glay",borderRadius: "5px",borderColor: "red",padding: "5px",fontSize: "16px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});map.addOverlay(label);}marker.addEventListener("click", function (e) {// console.log(e);map.removeOverlay(marker); //删除标记map.removeOverlay(label); //删除标签is_add = false;setTimeout(function () {is_add = true;}, 1);});map.addOverlay(marker);}`{volist name="lists" id="vo"}`;p_add(`{$vo.lat}`, `{$vo.lng}`, `{$i}`);`{/volist}`;// 监听点击事件添加markermap.addEventListener("click", function (e) {// console.log(e);if (is_add) {p_add(e.latlng.lat, e.latlng.lng);}});// 切换地图类型function map_tog() {if (map.getMapType() != BMAP_SATELLITE_MAP) {map.setMapType(BMAP_SATELLITE_MAP); //卫星底图} else {map.setMapType(BMAP_NORMAL_MAP); //矢量底图}}// 保存标记标记点function map_save() {var l2_marker = [];// 获取经纬度var arr_marker = map.getOverlays();// console.log(arr_marker);$.each(arr_marker, function (key, vo) {// console.log(vo);l2_marker.push({lat: vo.latLng.lat,lng: vo.latLng.lng,});});// console.log(l2_marker);l2_marker = JSON.stringify(l2_marker);$.post("", {id: "{$id}",l2_json: l2_marker,}, function (params) {if (params.code == 0) {layer.msg("标记成功");} else {layer.msg("标记失败");}}, "json");}</script>
</body></html>效果查看
<html><head><meta charset="utf-8"><title></title><meta name="renderer"content="webkit"><meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><link rel="stylesheet"href="/yunqikds_static/iconfont/iconfont.css"><script src="/yunqikds_static/iconfont/iconfont.js"></script><link rel="stylesheet"href="/yunqikds_static/layuiadmin/layui/css/layui.css"media="all"><script src="/yunqikds_static/layuiadmin/layui/layui.js"></script><script src="/yunqikds_static/js/jquery-1.10.2.min.js"></script></head><body><div id="container"></div><ul class="drawing-panel"><li class="btn"onclick="map_tog()">切换</li></ul><script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=xxx"></script><script type="text/javascript"src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script><script type="text/javascript">$(function () {layui.use(["layer",], function () {layer = layui.layer;});});var map = new BMapGL.Map("container", {mapType: BMAP_SATELLITE_MAP, //卫星底图// mapType: BMAP_NORMAL_MAP, //矢量底图});`{if $lng&&$lat}`;var c_pi = new BMapGL.Point(parseFloat(`{$lng}`), parseFloat(`{$lat}`));`{else}`;var c_pi = "乐都区";`{/if}`;map.centerAndZoom(c_pi, 16);map.enableScrollWheelZoom(true);map.disableDoubleClickZoom(); //设置是否可以双击放大var polygon_path = [];`{volist name="lists" id="vo"}`;polygon_path.push(new BMapGL.Point(parseFloat(`{$vo.lng}`), parseFloat(`{$vo.lat}`)));`{/volist}`;// console.log(polygon_path);// 绘制面var polygon1 = new BMapGL.Polygon(polygon_path, {strokeColor: "#295BFF",strokeWeight: 3,strokeOpacity: 0.5,fillOpacity: 0,});map.addOverlay(polygon1);// 切换地图类型function map_tog() {if (map.getMapType() != BMAP_SATELLITE_MAP) {map.setMapType(BMAP_SATELLITE_MAP); //卫星底图} else {map.setMapType(BMAP_NORMAL_MAP); //矢量底图}}</script>
</body></html>相关文章：
百度地图点标记加调用
先看效果 PHP代码 <?phpnamespace kds_addons\edata\controller;use think\addons\Controller; use think\Db;class Maps extends Controller {// 经纬度计算面积function calculate_area($points){$totalArea 0;$numPoints count($points);if ($numPoints > 2) {f…...
MySQL 其他数据库日志
我们了解数据库事务时，知道两种日志：重做日志，回滚日志。 对于线上数据库应用系统，突然遭遇 数据库宕机 怎么办？在这种情况下，定位宕机的原因 就非常关键。我们可以查看数据库的 错误日志。因为日志中记录…...
为何企业和开发团队应该重视进行兼容性测试
随着科技的不断进步和软件的广泛应用，保证软件在不同平台和环境下正常运行变得至关重要。本文将探讨软件兼容性测试的重要性和好处，并介绍为何企业和开发团队应该重视进行兼容性测试，以确保软件的稳定性和用户体验。 提供用户友好的体验 软件…...
牛客网Verilog刷题——VL51
牛客网Verilog刷题——VL51 题目答案 题目 请编写一个十六进制计数器模块，计数器输出信号递增每次到达0，给出指示信号zero，当置位信号set 有效时，将当前输出置为输入的数值set_num。模块的接口信号图如下： 模块的时序图…...
从零实现深度学习框架——Transformer从菜鸟到高手(一)
引言 💡本文为🔗[从零实现深度学习框架]系列文章内部限免文章，更多限免文章见 🔗专栏目录。 本着“凡我不能创造的，我就不能理解”的思想，系列文章会基于纯Python和NumPy从零创建自己的类PyTorch深度学习框…...
数组指针
数组指针的定义 1.数组指针是指针还是数组？ 指针。 int a 10;int* p &a;//指向整型数据的指针 char b w;char* q &b;//指向字符变量的指针 所以数组指针应该是指向数组的指针。 2.数组指针应该怎么定义？ int arr[10] { 0 };int(*p)[10] …...
C++设计模式之过滤器设计模式
C过滤器设计模式 什么是过滤器设计模式 过滤器设计模式是一种行为型设计模式，它允许你在特定的条件下对输入或输出进行过滤，以便实现不同的功能。 该模式有什么优缺点 优点 可扩展性：过滤器设计模式允许您轻松地添加、删除或替换过滤器&a…...
SpringBoot整合RedisTemplate操作Redis数据库详解（提供Gitee源码）
前言：简单分享一下我在实际开发当中如何使用SpringBoot操作Redis数据库的技术分享，完整的代码我都提供了出来，大家按需复制使用即可！ 目录 一、导入pom依赖 二、yml配置文件 三、使用FastJson序列化 四、核心配置类 五、工具…...
SQL 执行计划管理（SPM）
一、SPM 需求背景 任何数据库应用程序的性能在很大程度上都依赖于查询执行，尽管优化器无需用户干预就可以评估最佳计划，但是 SQL 语句的执行计划仍可能由于以下多种原因发生意外更改：版本升级、重新收集优化器统计信息、改变优化器参数或模式…...
浅谈微服务异步解决方案
导言 异步是一种设计思想，不是设计目的，因此不要为了异步而异步，要有所为，有所不为。 异步不是『银弹』， 避免试图套用一个『异步框架』解决所有问题， 需要根据不同的业务特点或要求，选择合适的…...
【音视频SDK测评】线上K歌软件开发技术选型
摘要 在线K歌软件的开发有许多技术难点，需考虑到音频录制和处理、实时音频传输和同步、音频压缩和解压缩、设备兼容性问题等技术难点外，此外，开发者还应关注音乐版权问题，确保开发的应用合规合法。 前言 前面写了几期关于直播 …...
Jackson：String转object反序列化失败
场景 消费mq时String转Object 代码 for (MessageExt msg : msgs) {String msgBody new String(msg.getBody(), StandardCharsets.UTF_8);BinlogEvent binlogEvent JsonUtil.silentString2Object(msgBody, BinlogEvent.class);binlogEvent.setPort(Long.valueOf(port));tCo…...
Spark_Core---6
spark 相关概念补充 课程目标 了解spark的安装部署知道spark作业提交集群的过程 6.1 spark的安装部署 1、下载spark安装包 http://spark.apache.org/downloads.html 高版本不存在cdh的编译版本，可以从官网下载源码版本，指定高版本hadoop进行编译 编译…...
游戏运营需要什么条件和准备？
游戏运营是一个复杂的过程，需要综合考虑多个因素。以下是一些游戏运营需要的条件和准备： 1、良好的游戏产品 首先，需要有一款优秀、有吸引力的游戏产品。游戏的质量和内容决定了用户是否愿意下载、留存和付费。 2、游戏运营团队 拥有专业…...
SVN限制Message提交的格式
限制Message提交的格式必须为以下格式 [Version] [Description] [TPA] [Doors] REPOS"$1" TXN"$2"# Make sure that the log message contains some text. SVNLOOK/usr/bin/svnlook MSG$SVNLOOK log -t "$TXN" "$REPOS"if [[ $MSG ~ …...
windows下安装anaconda、pycharm、cuda、cudnn、PyTorch-GPU版本
目录 一、anaconda安装及虚拟环境创建 1.anaconda的下载 2.Anaconda的安装 3.创建虚拟环境 3.1 环境启动 3.2 切换镜像源 3.3环境创建 3.4 激活环境 3.5删除环境 二、pycharm安装 1.pycharm下载 2.pycharm的安装 三、CUDA的安装 1.GPU版本和CUDA版本、cudnn版本、显卡…...
【计算机网络】传输层协议 -- UDP协议
文章目录 1. 传输层相关知识1.1 端口号1.2 端口号范围划分1.3 知名端口号1.4 一些相关命令 2. UDP协议2.1 UDP协议格式2.2 UDP协议的特点2.3 什么是面向数据报2.4 UDP的缓冲区2.5 UDP使用注意事项2.6 基于UDP的应用层协议 1. 传输层相关知识 传输层是计算机网络中的一个重要层…...
python制作超高难度走迷宫游戏，你要来挑战嘛~（赶紧收藏）
前言 嗨喽~大家好呀，这里是魔王呐 ❤ ~! 走迷宫，是一项充满智慧的挑战~ 作为经常刷短视频的我们，见识过不少迷宫小游戏 当然印象深刻的当然是小动物走迷宫 这里有几组挑战走迷宫的小可爱。先来看看吧！ （1ÿ…...
springboot整合tio-websocket方案实现简易聊天
写在最前： 常用的http协议是无状态的，且不能主动响应到客户端。最初想实现状态动态跟踪只能用轮询或者其他效率低下的方式，所以引入了websocket协议，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务…...
《TCP IP网络编程》第十三章
第 13 章 多种 I/O 函数 13.1 send & recv 函数 Linux 中的 send & recv： send 函数定义： #include <sys/socket.h> ssize_t send(int sockfd, const void *buf, size_t nbytes, int flags); /* 成功时返回发送的字节数，失败…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
【JVM】- 内存结构
引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
掌握 HTTP 请求：理解 cURL GET 语法
cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...
macOS 终端智能代理检测
🧠 终端智能代理检测：自动判断是否需要设置代理访问 GitHub 在开发中，使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新，例如： fatal: unable to access https://github.com/ohmyzsh/oh…...