百度地图点标记加调用
先看效果
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); /* 成功时返回发送的字节数，失败…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes࿰…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南：从入门到实战 一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用： 方法一：使用 Homebrew 安装 Git（推荐） 步骤如下：打开终端（Terminal.app） 1.安装 Homebrew…...