百度地图点标记加调用

news2024/10/6 14:34:12

先看效果
在这里插入图片描述
在这里插入图片描述
PHP代码

<?php

namespace 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); //只保留数组中的value
			Db::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}`;

		// 监听点击事件添加marker
		map.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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Blazor前后端框架Known-V1.2.9

Blazor前后端框架Known-V1.2.9

V1.2.9 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazor…
阅读更多...
（学习笔记1）类和对象详解（C++）

（学习笔记1）类和对象详解（C++）

类和对象 1.类的定义语法类的定义方式 2.类的访问限定符2.1 访问限定符的特点2.2 struct与class的区别 3. 三大特性3.1 封装4.类的作用域5.类的实例化6.类对象模型7.this指针7.1 this指针的特性7.2 this指针相关问题 1.类的定义 类是面向对象语言特有的语法&#xff0c;在面向…
阅读更多...
数组中重复的数字_剑指 Offer 03

数组中重复的数字_剑指 Offer 03

文章目录 题目描述法一 哈希表 题目描述 法一 哈希表 int findRepeatNumber(vector<int>& nums){unordered_map<int, bool> map;for(const int& num:nums){if(map[num]) return num;map[num]true;}return -1;}
阅读更多...
c++游戏制作指南 模板（权当预告）

c++游戏制作指南 模板（权当预告）

&#x1f37f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f37f; &#x1f35f;欢迎来到静渊隐者的csdn博文&#xff0c;本文是c游戏制作指南的一部&#x1f35f; &#x1f355;更多文章请点击下方链接&#x1f355; &#x1f368; c游戏制作指南&#x1f3…
阅读更多...
C++调用C# dll成功示例

C++调用C# dll成功示例

方法1&#xff1a;公共语言运行时支持 一.准备C# dll类库 。生成CSLib.dll namespace CSLib {public class Class1{private string name;public string Name{get{return name;}set{name "Your Name: " value;}}} }二、写C应用调用 1)需要把dll复制到运行目录下。…
阅读更多...
Python实现GA遗传算法优化BP神经网络回归模型(BP神经网络回归算法)项目实战

Python实现GA遗传算法优化BP神经网络回归模型(BP神经网络回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 遗传算法&#xff08;Genetic Algorithm&#xff0c;GA&#xff09;最早是由美国的 John holland于20世…
阅读更多...
超细详解，接口自动化测试-JSON和JsonPath提取数据（实战）

超细详解，接口自动化测试-JSON和JsonPath提取数据（实战）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 JSON(JavaScript …
阅读更多...
修改若依框架为自己的项目并上传到git

修改若依框架为自己的项目并上传到git

第一步: 打开后台若依项目,把全局替换打开,搜索ruoyi 和 RuoYi 和 若依 分别换成自己公司的名称( 记住要把区分大小写打开 ) 第二步: 关闭idea中的项目,然后在文件夹中打开这个项目,然后搜索target( 缓冲 ) 删除,部分人的电脑上面还有imp文件切记也要删除 第三步: 接着把项目…
阅读更多...
Day09-作业（Mybatis）

Day09-作业（Mybatis）

作业1&#xff1a;通过SpringBootMybatis的方式完成如下学员管理的需求 页面原型&#xff1a; 数据准备&#xff1a; -- 学员表 create table student(id int unsigned primary key auto_increment comment ID,主键,name varchar(10) not null comment 姓名,no char(10) not …
阅读更多...
C++多线程基本原理详解

C++多线程基本原理详解

在C学习过程中&#xff0c;要想“更上一层楼”的话&#xff0c;多线程编程是必不可少的一步&#xff0c;大家需要更多的思考是为什么这么做&#xff1f;这样做的好处是什么&#xff1f;以及多线程编程都可以应用在哪里&#xff1f; 1、多线程 传统的C&#xff08;C11标准之前…
阅读更多...
R语言中数据重塑（长宽表的转化）

R语言中数据重塑（长宽表的转化）

学习笔记&#xff0c;仅供学习使用。 目录 1-什么是整洁的数据&#xff1f; 2-宽表变成长表 示例1&#xff1a; 示例2&#xff1a; 示例3&#xff1a; 3-长表变宽表 示例1&#xff1a; 示例2&#xff1a; 1-什么是整洁的数据&#xff1f; 按照Hadley的表述&#xf…
阅读更多...
我的观影记录表【个人向】

我的观影记录表【个人向】

目录 前言电影评分标准闪电侠&#xff08;2023&#xff09;银河护卫队3&#xff08;2023&#xff09; 前言 这里是我本人的观影记录&#xff0c;这个想法2年前就有了&#xff0c;但是一直比较懒&#xff0c;现在&#xff08;上班摸鱼&#xff09;准备重新开始&#xff0c;评价…
阅读更多...
Spring Boot Starter 剖析与实践 | 京东云技术团队

Spring Boot Starter 剖析与实践 | 京东云技术团队

引言 对于 Java 开发人员来说&#xff0c;Spring 框架几乎是必不可少的。它是一个广泛用于开发企业应用程序的开源轻量级框架。近几年&#xff0c;Spring Boot 在传统 Spring 框架的基础上应运而生&#xff0c;不仅提供了 Spring 的全部功能&#xff0c;还使开发人员更加便捷地…
阅读更多...
Bigemap 在网络通讯行业中的应用场景

Bigemap 在网络通讯行业中的应用场景

地图应用&#xff1a; 使用我们软件下载地图&#xff0c;对影像需求是高频更新&#xff0c;我们软件目前的更新频率可以满足需求&#xff0c;实现离线地图的下载&#xff0c;在地图上导入数据查看和标注点位&#xff0c;基站信号覆盖展示数据并且导出&#xff0c;并且会发送到…
阅读更多...
​​​amoeba实现MySQL读写分离

​​​amoeba实现MySQL读写分离

​​​amoeba实现MySQL读写分离 准备环境&#xff1a;主机A和主机B作主从配置&#xff0c;IP地址为192.168.131.129和192.168.131.130&#xff0c;主机C作为中间件&#xff0c;也就是作为代理服务器&#xff0c;IP地址为192.168.131.136。三台服务器操作系统为RHEL6.4 x86_64,为…
阅读更多...
Codeforces Round 889 (Div. 2)（视频讲解A——D）

Codeforces Round 889 (Div. 2)（视频讲解A——D）

文章目录 A Dalton the TeacherB Longest Divisors IntervalC2 Dual (hard Version)D Earn or Unlock Codeforces Round 889 (Div. 2)&#xff08;视频讲解A——D&#xff09; A Dalton the Teacher #include<bits/stdc.h> #define endl \n #define INF 0x3f3f3f3f us…
阅读更多...
自定义MVC增删改查

自定义MVC增删改查

目录 mymvcdemo是自定义mvc框架的使用示例 1.1 实体类 1.2 dao方法 1.3 写Service / biz 三层架构 1.4 建action 相当于selvert 1.5 con连接MySQL 8.0 版本 1.6 配置文件 XML 1.7 主界面布局 1.8 增加界面布局 1.9 写tld配置文件 2.0 注意架包 我是已经打包好的 mymv…
阅读更多...
Leetcode-每日一题【剑指 Offer 53 - I. 在排序数组中查找数字 I】

Leetcode-每日一题【剑指 Offer 53 - I. 在排序数组中查找数字 I】

题目 统计一个数字在排序数组中出现的次数。 示例 1: 输入: nums [5,7,7,8,8,10], target 8输出: 2 示例 2: 输入: nums [5,7,7,8,8,10], target 6输出: 0 提示&#xff1a; 0 < nums.length < 105-109 < nums[i] < 109nums 是一个非递减数组-109 < targe…
阅读更多...
Java课题笔记~ MyBatis入门

Java课题笔记~ MyBatis入门

一、ORM框架 当今企业级应用的开发环境中&#xff0c;对象和关系数据是业务实体的两种表现形式。业务实体在内存中表现为对象&#xff0c;在数据库中变现为关系数据。当采用面向对象的方法编写程序时&#xff0c;一旦需要访问数据库&#xff0c;就需要回到关系数据的访问方式&…
阅读更多...
软件测评中心测试流程是怎样的?CMA、CNAS软件测试报告出具

软件测评中心测试流程是怎样的?CMA、CNAS软件测试报告出具

软件测评中心是一个专门负责进行软件评估、测试和审查等工作的机构。在软件测评中心中&#xff0c;软件测试流程是按照一系列固定的步骤和流程进行的&#xff0c;以确保测试工作的全面性、系统性和规范性。 1、需求分析&#xff1a;在软件测评过程中&#xff0c;首先需要对软件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023