百度地图点标记加调用
先看效果
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); /* 成功时返回发送的字节数，失败…...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...