腾讯地图点标记加调用

news2024/11/16 16:00:06

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

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 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);
			marker.on("click", function (evt) {
				// console.log(evt);
				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.coloradmin.cn/o/814799.html

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

相关文章

Qt、Qt Creator下载、安装

Qt、Qt Creator下载、安装

一、Qt、Qtcreator简介 Qt是一个跨平台应用开发框架。 Qt Creator是一个跨平台的集成开发环境&#xff08;IDE&#xff09;&#xff0c;集成了Qt所提供的功能&#xff0c;可以单独下载使用&#xff0c;也可以结合Qt组合使用。 二、下载 下载地址&#xff1a;https://downloa…
阅读更多...
2023 ChinaJoy | 移远通信携手高通，共创数字娱乐新体验

2023 ChinaJoy | 移远通信携手高通，共创数字娱乐新体验

当前&#xff0c; 5G、AI、大数据等智能创新技术正以惊人的速度蔓延至越来越多的领域&#xff0c;从智能家居、智能交通、智能医疗到智能制造&#xff0c;改变了我们的工作和生活方式。 而在数字娱乐领域&#xff0c;智能创新技术也展现出了巨大的潜力。作为全球领先的物联网整…
阅读更多...
13.5.5 【Linux】其他相关文件

13.5.5 【Linux】其他相关文件

除了前一小节谈到的 /etc/securetty 会影响到 root 可登陆的安全终端机&#xff0c; /etc/nologin 会影响到一般使用者是否能够登陆的功能之外&#xff0c;我们也知道 PAM 相关的配置文件在 /etc/pam.d &#xff0c;说明文档在 /usr/share/doc/pam-&#xff08;版本&#xff09…
阅读更多...
牛客网Verilog刷题——VL47

牛客网Verilog刷题——VL47

牛客网Verilog刷题——VL47 题目答案 题目 实现4bit位宽的格雷码计数器。 电路的接口如下图所示&#xff1a; 输入输出描述&#xff1a; 信号类型输入/输出位宽描述clkwireIntput1时钟信号rst_nwireIntput1异步复位信号&#xff0c;低电平有效gray_outregOutput4输出格雷码计数…
阅读更多...
管理ceph集群

管理ceph集群

文章目录 ceph的常用命令查看集群状态查看pg的状态查看mon节点状态查看osd的通用命令查看osd的容量查看osd池写入文件测试查看池的属性查看文件映射过程 添加磁盘删除磁盘 ceph的常用命令 查看集群状态 ceph osd pool application enable pool-name rbd #将池启用rbd功能 ceph…
阅读更多...
Java集合框架-List、Set、Map

Java集合框架-List、Set、Map

一、Java集合框架概述&#xff1a; 1.1 Collection接口继承树 JDK提供的集合API位于java.util包内。 Map接口继承树 1.2 Collection接口方法 Collection 接口 Collection 接口是 List、Set 和 Queue 接口的父接口&#xff0c;该接口里定义的方法既可用于操作 Set 集合&#…
阅读更多...
Matlab进阶绘图第24期—悬浮柱状图

Matlab进阶绘图第24期—悬浮柱状图

悬浮柱状图是一种特殊的柱状图。 与常规柱状图相比&#xff0c;悬浮柱状图可以通过悬浮的矩形展示最小值到最大值的范围&#xff08;或其他范围表达&#xff09;&#xff0c;因此在多个领域得到应用。 本文使用自己制作的Floatingbar小工具进行悬浮柱状图的绘制&#xff0c;先…
阅读更多...
【Linux】Linux项目自动化构建工具 make/Makefile

【Linux】Linux项目自动化构建工具 make/Makefile

目录 1. Makefile 是如何工作的 2. 依赖关系与依赖方法 3. .PHONY 4. Makefile 的特殊符号 写在最后&#xff1a; 1. Makefile 是如何工作的 make 是一个命令。 Makefile 是一个文件&#xff0c;当前目录下的一个文件。 我们先来上手写一个简单的 Makefile 文件&#…
阅读更多...
火山引擎AB测试：广告实验深度打通巨量引擎，高效测试广告素材

火山引擎AB测试：广告实验深度打通巨量引擎，高效测试广告素材

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 近期&#xff0c;火山引擎AB测试DataTester上线了新版的广告AB实验&#xff0c;还推出了与巨量引擎深度打通的能力。用户可以在DataTester中直接进行广告落地页的创…
阅读更多...
机器学习：异常检测

机器学习：异常检测

问题定义 anomaly&#xff0c;outlier&#xff0c; novelty&#xff0c; exceptions 不同的方法使用不同的名词定义这类问题。 应用 二分类 假如只有正常的数据&#xff0c;而异常的数据的范围非常广的话&#xff08;无法穷举&#xff09;&#xff0c;二分类这些不好做。另外就…
阅读更多...
没钱,没人,没IT,如何成功进行数字化转型?

没钱,没人,没IT,如何成功进行数字化转型?

在数字化时代的浪潮下&#xff0c;技术的迅猛发展为企业和个人带来了前所未有的机遇和挑战。然而&#xff0c;传统的软件开发过程通常需要大量的编程工作&#xff0c;对于非技术背景的人士而言&#xff0c;这是一座高不可攀的技术门槛。如何能够快速地实现创新&#xff0c;推动…
阅读更多...
YAML+PyYAML笔记 9 | PyYAML源码之dump()，dump_all()，safe_dump()，yaml.YAMLObject

YAML+PyYAML笔记 9 | PyYAML源码之dump()，dump_all()，safe_dump()，yaml.YAMLObject

9 | PyYAML源码之emit&#xff0c;dump&#xff0c;safe_dump&#xff0c;yaml.YAMLObject 1 yaml.dump()2 yaml.dump()3 yaml.safe_dump4 yaml.YAMLObject 1 yaml.dump() 源码&#xff1a; 作用&#xff1a; 将Python对象序列化为YAML流。如果stream为None&#xff0c;则返…
阅读更多...
无涯教程-jQuery - Tooltip组件函数

无涯教程-jQuery - Tooltip组件函数

小部件工具提示功能可与JqueryUI中的小部件一起使用。Tooltip用于显示提示。 Tooltip - 语法 $( document ).tooltip(); Tooltip - 示例 以下是显示工具提示用法的简单示例- <!doctype html> <html lang"en"><head><meta charset"utf…
阅读更多...
【腾讯云 Cloud Studio 实战训练营】在Cloud Studio上使用React实现学生管理系统

【腾讯云 Cloud Studio 实战训练营】在Cloud Studio上使用React实现学生管理系统

一、前言 为了提升办公效率&#xff0c;越来越多的人开始使用云工作站的方法进行“云办公”了&#xff0c;所谓云办公即把传统意义办公场所转移到网络浏览器中&#xff0c;这样做的好处有&#xff1a; 实现真正的移动化办公&#xff0c;不再受设备、时间、地点等的束缚&#…
阅读更多...
最近写了10篇Java技术博客【SQL和画图组件】

最近写了10篇Java技术博客【SQL和画图组件】

&#xff08;1&#xff09;Java获取SQL语句中的表名 &#xff08;2&#xff09;Java SQL 解析器实践 &#xff08;3&#xff09;Java SQL 格式化实践 &#xff08;4&#xff09;Java 画图 画图组件jgraphx项目整体介绍&#xff08;一&#xff09; 画图组件jgraphx项目导出…
阅读更多...
Java版知识付费 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台免费搭建

Java版知识付费 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台免费搭建

提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含&#xff1a;录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署&#xff0c;免费售后&#xff0c;专业技术指导&#xff0c;支持PC、APP、H5、小程序多终端同步&#xff0c;支持二次开发…
阅读更多...
VsCode与Idea编辑器更换背景图

VsCode与Idea编辑器更换背景图

目录 VsCode Idea VsCode 需要安装background插件 安装完成后&#xff0c;打开设置&#xff0c;搜索background 然后就可以在json文件进行图片设置&#xff0c;透明度等等 Idea 打开File -> Settings 然后找到Appearance &#xff0c; 往下滑&#xff0c;找到BackGround …
阅读更多...
Android studio实现Button界面跳转

Android studio实现Button界面跳转

本教程以界面MainActivity跳转到TwoActivity为例 MainActivity对应layout&#xff1a;R.layout.activity_main TwoActivity*对应layout&#xff1a;R.layout.twolayout 1. 建立MainActivity的java文件 package com.example.myapplication;//界面跳转 所需头文件 import andro…
阅读更多...
在人工智能的浪潮下，汽车自动驾驶的新发展新可能

在人工智能的浪潮下，汽车自动驾驶的新发展新可能

原创 | 文 BFT机器人 相信生活在21世纪的人们&#xff0c;没有人会不知道什么是人工智能。如果你不知道&#xff0c;那么你就是被现社会甩在了身后。人工智能从出现到现在&#xff0c;经历了60年的发展&#xff0c;而如今人工智能更如一股大浪潮&#xff0c;席卷了全国各地&am…
阅读更多...
Keil5芯片pack包官网下载与安装

Keil5芯片pack包官网下载与安装

1.进入官网 ARM Keil官网链接&#xff1a;https://www.keil.arm.com/ 2.进入CMSIS Packs中选择需要的pack包 输入需要的芯片型号后回车能显示出所有相关型号&#xff0c;或者在输入栏下方列表中查找&#xff1a; 3.下载所需的安装包 找到所需安装包后&#xff0c;右键在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023