腾讯地图点标记加调用

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

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");
	}
}

选点

<!DOCTYPE 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>

<style type="text/css">
	html,
	body {
		height: 100%;
		margin: 0px;
		padding: 0px;
	}

	#container {
		width: 100%;
		height: 100%;
	}

</style>
<style type="text/css">
	ul li {
		list-style: none;
	}

	.drawing-panel {
		z-index: 9999;
		position: fixed;
		bottom: 3.5rem;
		margin-left: 3rem;
		padding: 1rem 1rem;
		border-radius: .25rem;
		background-color: #fff;
		box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
	}

	.btn {
		width: 150px;
		height: 30px;
		float: left;
		background-color: #fff;
		color: rgba(27, 142, 236, 1);
		font-size: 14px;
		border: 1px solid rgba(27, 142, 236, 1);
		border-radius: 5px;
		margin: 0 5px;
		text-align: center;
		line-height: 30px;
	}

	.btn:hover {
		background-color: rgba(27, 142, 236, 0.8);
		color: #fff;
	}

</style>

<body>
	<div id="container"></div>
	<ul class="drawing-panel">
		<li class="btn"
			onclick="map_tog()">切换</li>
	</ul>

	<script charset="utf-8"
		src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
	<script type="text/javascript">
		$(function () {
			layui.use([
				"layer",
			], function () {
				layer = layui.layer;

			});
		});

		var is_add = true; //解决单击添加和删除冲突的问题
		var is_point = ""; //解决多次删除的问题

		// 初始化地图
		var c_pi = new TMap.LatLng(parseFloat(`{$lat?$lat:"36.6171"}`), parseFloat(`{$lng?$lng:"101.7782"}`)); //中心点
		var map = new TMap.Map("container", {
			center: c_pi,
			doubleClickZoom: false, //设置是否可以双击放大
			zoom: 16,
			baseMap: {
				type: "satellite", //卫星底图
				// type: "vector", //矢量底图
			},
		});

		map.setDoubleClickZoom(false); //设置是否可以双击放大

		map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); //移除腾讯地图比例尺
		map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); //移除腾讯地图旋转控件
		map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); //移除腾讯地图缩放控件

		// 创建MultiMarker对象
		var multi_marker = new TMap.MultiMarker({
			map: map,
			styles: {
				"my_styles": new TMap.MarkerStyle({
					strokeColor: "#fff",
					size: 24,
					strokeWidth: 3,
				}),
			},
		});

		// 添加标记点
		function p_add(lat, lng, i = null) {
			lat = parseFloat(lat);
			lng = parseFloat(lng);
			var datas = {
				position: new TMap.LatLng(lat, lng),
			};
			if (i) {
				// console.log(i);
				datas.content = i;
				datas.styleId = "my_styles";
			}
			var marker = multi_marker.add(datas);
			is_point = "";
			marker.on("click", function (evt) {
				// console.log(evt);
				if (!evt.geometry) {
					return false;
				}
				var points = JSON.stringify(evt.point);
				if (is_point == points) {
					return false;

				}
				is_point = points;
				multi_marker.remove(evt.geometry.id);
				is_add = false;
				setTimeout(function () {
					is_add = true;
				}, 1);
			});
		}

		`{volist name="lists" id="vo"}`;
		p_add(`{$vo.lat}`, `{$vo.lng}`, `{$i}`);
		`{/volist}`;

		// 监听点击事件添加marker
		map.on("click", function (evt) {
			// console.log(evt);
			if (is_add) {
				p_add(evt.latLng.lat, evt.latLng.lng);
			}
		});

		// 切换地图类型
		function map_tog() {
			if (map.getBaseMap().type != "satellite") {
				map.setBaseMap({
					type: "satellite", //卫星底图
				});
			} else {
				map.setBaseMap({
					type: "vector", //矢量底图
				});
			}
		}

		// 保存标记标记点
		function map_save() {
			var l2_marker = [];
			// 获取经纬度
			var arr_marker = multi_marker.getGeometries();
			// console.log(arr_marker);
			$.each(arr_marker, function (key, vo) {
				// console.log(vo);
				l2_marker.push({
					lat: vo.position.lat,
					lng: vo.position.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>

效果查看

<!DOCTYPE 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>

<style type="text/css">
	html,
	body {
		height: 100%;
		margin: 0px;
		padding: 0px;
	}

	#container {
		width: 100%;
		height: 100%;
	}

</style>
<style type="text/css">
	ul li {
		list-style: none;
	}

	.drawing-panel {
		z-index: 9999;
		position: fixed;
		bottom: 3.5rem;
		margin-left: 3rem;
		padding: 1rem 1rem;
		border-radius: .25rem;
		background-color: #fff;
		box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
	}

	.btn {
		width: 150px;
		height: 30px;
		float: left;
		background-color: #fff;
		color: rgba(27, 142, 236, 1);
		font-size: 14px;
		border: 1px solid rgba(27, 142, 236, 1);
		border-radius: 5px;
		margin: 0 5px;
		text-align: center;
		line-height: 30px;
	}

	.btn:hover {
		background-color: rgba(27, 142, 236, 0.8);
		color: #fff;
	}

</style>

<body>
	<div id="container"></div>
	<ul class="drawing-panel">
		<li class="btn"
			onclick="map_tog()">切换</li>
	</ul>

	<script charset="utf-8"
		src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
	<script type="text/javascript">
		$(function () {
			layui.use([
				"layer",
			], function () {
				layer = layui.layer;

			});
		});

		// 初始化地图
		var c_pi = new TMap.LatLng(parseFloat(`{$lat?$lat:"36.6171"}`), parseFloat(`{$lng?$lng:"101.7782"}`)); //中心点
		var map = new TMap.Map("container", {
			center: c_pi,
			doubleClickZoom: false, //设置是否可以双击放大
			zoom: 16,
			baseMap: {
				type: "satellite", //卫星底图
				// type: "vector", //矢量底图
			},
		});

		map.setDoubleClickZoom(false); //设置是否可以双击放大

		map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); //移除腾讯地图比例尺
		map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); //移除腾讯地图旋转控件
		map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); //移除腾讯地图缩放控件

		var polygon_path = [];
		`{volist name="lists" id="vo"}`;
		polygon_path.push(new TMap.LatLng(parseFloat(`{$vo.lat}`), parseFloat(`{$vo.lng}`)));
		`{/volist}`;
		// console.log(polygon_path);

		var polygon1 = new TMap.MultiPolygon({
			map, // 显示多边形图层的底图
			styles: { // 多边形的相关样式
				polygon1: new TMap.PolygonStyle({
					color: "rgba(0,0,0,0)", // 面填充色
					showBorder: true, // 是否显示拔起面的边线
					borderColor: "#295BFF", // 边线颜色
					borderWidth: 3, // 边线宽度
					// borderDashArray: [5, 5], // 虚线数组
				}),
			},
			geometries: [{
				id: "polygon1", // 多边形图形数据的标志信息
				styleId: "polygon1", // 样式id
				paths: polygon_path, // 多边形的位置信息
			}],
		});

		// 获取面积
		var area = TMap.geometry.computeArea(polygon_path);
		console.log(area);

		// 切换地图类型
		function map_tog() {
			if (map.getBaseMap().type != "satellite") {
				map.setBaseMap({
					type: "satellite", //卫星底图
				});
			} else {
				map.setBaseMap({
					type: "vector", //矢量底图
				});
			}
		}

	</script>
</body>

</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【MySQL】视图与用户管理

【MySQL】视图与用户管理

【MySQL】视图 视图视图概念使用基表与视图的相互影响 用户管理新增用户删除修改密码 用户权限授予权限回收权限 视图 视图概念 视图就是一张虚拟表&#xff0c;其内容由查询定义。与真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据。视图的数据变化影响到基表&…
阅读更多...
Linux下.py文件只读问题以及解决过程

Linux下.py文件只读问题以及解决过程

一、问题描述 如图&#xff0c;在Ubuntu Linux系统中使用pycharm管理项目文件时&#xff0c;无法编辑&#xff0c;提示文件为只读&#xff1a; 点击"OK"后仍旧无法清除只读模式&#xff0c;并报错&#xff1a; 二、问题解决 将问题定性为文件权限相关问题&#…
阅读更多...
【英杰送书-第六期】spring—加载监听器

【英杰送书-第六期】spring—加载监听器

前几天的时候&#xff0c;项目里有一个需求&#xff0c;需要一个开关控制代码中是否执行一段逻辑&#xff0c;于是理所当然的在yml文件中配置了一个属性作为开关&#xff0c;再配合nacos就可以随时改变这个值达到我们的目的&#xff0c;yml文件中是这样写的&#xff1a; switc…
阅读更多...
2023年全新版Java学习路线，精心整理【文中送书福利 】

2023年全新版Java学习路线，精心整理【文中送书福利 】

小伙伴们大家好&#xff0c;这里是动力节点&#xff0c;我们从2009年开始一直在从事Java培训 到今年已经整14年了&#xff0c;虽然现在不缺培训机构&#xff0c;更不缺Java培训&#xff0c;但是像我们这么多年专注这一件事的应该也不多。我们只希望在“专业”两个字上面不断精…
阅读更多...
【测试学习四】掌握测试用例的设计方法有哪些~

【测试学习四】掌握测试用例的设计方法有哪些~

目录 需要知道&#xff1a;了解测试用例 &#x1f337;1、测试用例的基本要素&#xff1f; &#x1f337;2、什么是好的测试用例&#xff1f; &#x1f337;3、不学习测试用例的设计方法&#xff0c;能不能对一个物体或软件进行测试&#xff1f; 一、基于黑盒测试用例的设计…
阅读更多...
Redis集群Cluster搭建

Redis集群Cluster搭建

Redis集群Cluster搭建 集群框架1、下载redis2.创建Cluster文件3.修改redis配置文件4.启动redis5.链接各个redis6.分配槽位7.添加从机节点&#xff08;备份Redis&#xff09;8.以集群方式登录9.使用开源Redis可视化客户端链接 集群框架 三个集群节点&#xff0c;每个节点有个副本…
阅读更多...
sqlserver 使用SQLOLEDB 远程数据库同步数据

sqlserver 使用SQLOLEDB 远程数据库同步数据

exec sp_addlinkedserver remote_server, , SQLOLEDB, ip exec sp_addlinkedsrvlogin remote_server, false,null, 账号, 密码 --查询方式 select * from remote_server.数据库名.dbo.表名 --不再使用时删除链接服务器 exec sp_dropserver remote_server, droplogins…
阅读更多...
活动预告 | 中国数据库联盟（ACDU）中国行第二站定档杭州，邀您探讨数据库技术与实践！

活动预告 | 中国数据库联盟（ACDU）中国行第二站定档杭州，邀您探讨数据库技术与实践！

数据库技术一直是信息时代中不可或缺的核心组成部分&#xff0c;随着信息量的爆炸式增长和数据的多样化&#xff0c;其重要性愈发凸显。作为中国数据库联盟&#xff08;ACDU&#xff09;的品牌活动之一&#xff0c;【ACDU 中国行】在线下汇集数据库领域的行业知名人士&#xff…
阅读更多...
JVM基础篇-方法区与运行时常量池

JVM基础篇-方法区与运行时常量池

JVM基础篇-方法区与运行时常量池 方法区 Java 虚拟机有一个在所有 Java 虚拟机线程之间共享的方法区。方法区类似于传统语言的编译代码的存储区或者类似于操作系统进程中的“文本”段。它存储每个类的结构&#xff0c;例如运行时常量池、字段和方法数据&#xff0c;以及方法和…
阅读更多...
在 3ds Max 中使用相机映射将静止图像转换为实时素材

在 3ds Max 中使用相机映射将静止图像转换为实时素材

推荐&#xff1a; NSDT场景编辑器 助你快速搭建可二次开发的3D应用场景 1. 在 Photoshop 中准备图像 步骤 1 这是我将在教程中使用的静止图像。 这是我的静态相机纸箱的快照。 静止图像 步骤 2 打开 Photoshop。将图像导入 Photoshop。 打开 Photoshop 步骤 3 单击套索工…
阅读更多...
Web端即时通讯技术(SEE,webSocket)

Web端即时通讯技术(SEE,webSocket)

目录 背景简介个人见解被动推送轮询简介实现 长轮询&#xff08;comet&#xff09;简介实现 比较 主动推送长连接&#xff08;SSE&#xff09;简介实现GETPOST 效果 webSocket简介WebSocket的工作原理:WebSocket的主要优点:WebSocket的主要缺点: 实现用法一用法二 效果 比较参考…
阅读更多...
第17节 R语言分析：生物统计数据集 R 编码分析和绘图

第17节 R语言分析：生物统计数据集 R 编码分析和绘图

生物统计数据集 R 编码分析和绘图 生物统计学，用于对给定文件 data.csv 中的医疗数据应用 R 编码，该文件是患者人口统计数据集，包含有关来自各种祖先谱系的个体的标准信息。 数据集特征解释 脚本 output= file("Output.txt") # File name of output log sink(o…
阅读更多...
【Docker】Docker安装Kibana服务_Docker+Elasticsearch+Kibana

【Docker】Docker安装Kibana服务_Docker+Elasticsearch+Kibana

文章目录 1. 什么是Kibana2. Docker安装Kibana2.1. 前提2.2. 安装Kibana 点击跳转&#xff1a;Docker安装MySQL、Redis、RabbitMQ、Elasticsearch、Nacos等常见服务全套&#xff08;质量有保证&#xff0c;内容详情&#xff09; 1. 什么是Kibana Kibana 是一款适用于Elasticse…
阅读更多...
C++中内存的动态管理

C++中内存的动态管理

我们在C语言中了解到可以在栈区动态开辟空间&#xff0c;并且用完要进行释放&#xff0c;防止内存泄漏。 引入 C中也有可以进行动态开辟空间和释放空间的操作符new 、delete&#xff0c;虽然C中也可以用malloc、calloc、realloc、free函数&#xff0c;但是C中引入了类&#x…
阅读更多...
二十三种设计模式第二十二篇--中介者模式

二十三种设计模式第二十二篇--中介者模式

说到这个模式就有趣了&#xff0c;不知道大家在生活中喷到过中介没&#xff1f;其实中介这个词吧&#xff0c;我也说不上好还是坏&#xff0c;有时候他可以帮助人们更快的达到某个目的&#xff0c;但有的时候吧&#xff0c;这个有贼坑人&#xff0c;相信网络上有各种被中介坑的…
阅读更多...
Ubuntu20.04进入桌面后左上角光标闪动

Ubuntu20.04进入桌面后左上角光标闪动

T 光标闪烁就是后台一系列活动的简化&#xff0c;它表示后台有一系列活动在进行&#xff0c;只是我们看不到。也因此让我们觉得它像是卡住了。 Y 一开始误以为是由于我安装其他启动动画导致的&#xff0c;后来换回默认的动画发现不是这个原因。 后来我试了各种方法&#xff…
阅读更多...
Android复习（Android基础-四大组件）—— Activity

Android复习（Android基础-四大组件）—— Activity

Activity作为四大组件之首&#xff0c;是使用最为频繁的一种组件&#xff0c;中文直接翻译为"活动"&#xff0c;不过如果被翻译为"界面"会更好理解。正常情况&#xff0c;除了Window&#xff0c;Dialog和Toast &#xff0c; 我们能见到的界面只有Activity。…
阅读更多...
【硬件设计】模拟电子基础二--放大电路

【硬件设计】模拟电子基础二--放大电路

模拟电子基础二--放大电路 一、基本放大电路1.1 初始电路1.2 静态工作点1.3 分压偏置电路 二、负反馈放大电路三、直流稳压电路 前言&#xff1a;本章为知识的简单复习&#xff0c;适合于硬件设计学习前的知识回顾&#xff0c;不适合运用于考试。 一、基本放大电路 1.1 初始电…
阅读更多...
小白到运维工程师自学之路 第六十三集 （dockerfile安装sshd、httpd、nginx）

小白到运维工程师自学之路 第六十三集 （dockerfile安装sshd、httpd、nginx）

一、概述 Dockerfile的指令根据作用可以分为两种&#xff0c;构建指令和设置指令。构建指令用于构建image&#xff0c;其指定的操作不会在运行image的容器上执行&#xff1b;设置指令用于设置image的属性&#xff0c;其指定的操作将在运行image的容器中执行。 1、FROM 镜像:T…
阅读更多...
Vue3基础（1）

Vue3基础（1）

1.简单的vue实例 1.data函数介绍 也可以修改data里的数据 2.自定义函数 调用函数 3.Vue模板语法 &#xff08;1).V-html (2)三目运算符的支持 &#xff08;3&#xff09;对函数的支持 &#xff08;4&#xff09;v-bind 值动态修改 4.指令 1.v-if和v-else的使用
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站