百度地图点标记加调用
先看效果
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); /* 成功时返回发送的字节数，失败…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求ÿ…...
基于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…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识：什么是 B-Tree 和 BTree？ B-Tree（平衡多路查找树） BTree（B-Tree 的变种） 二、结构对比：一张图看懂 三、为什么 MySQL InnoDB 选择 BTree？ 1. 范围查询更快 2…...
实战三：开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。 效果图 二、实现思路 总体思路： 用户通过Gradio界面上…...
Python 高效图像帧提取与视频编码：实战指南
Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...
MySQL的pymysql操作
本章是MySQL的最后一章，MySQL到此完结，下一站Hadoop！！！ 这章很简单，完整代码在最后，详细讲解之前python课程里面也有，感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例
目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码：冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...