百度地图点标记加调用

先看效果
在这里插入图片描述
在这里插入图片描述
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>

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

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

相关文章

第六章：SpringMVC上

第六章：SpringMVC上

第六章&#xff1a;SpringMVC上 6.1&#xff1a;SpringMVC简介 什么是MVC MVC是一种软件架构的思想&#xff0c;将软件按照模型、视图、控制器来划分。 M&#xff1a;Model&#xff0c;模型层&#xff0c;指工程中的JavaBean&#xff0c;作用是处理数据。 一类称为实体类Bean&…
阅读更多...
JavaEE初阶之网络初识

JavaEE初阶之网络初识

一、网络发展史 1.1独立模式 独立模式：计算机之间相互独立； 1.2网络互连 随着时代的发展，越来越需要计算机之间互相通信，共享软件和数据，即以多个计算机协同工作来完成业务，就有了网络互连。网络互连：将多台计算机连接在一起，完成数据共享。 数据共享本质是网络数据…
阅读更多...
时序预测 | Python实现NARX-DNN空气质量预测

时序预测 | Python实现NARX-DNN空气质量预测

时序预测 | Python实现NARX-DNN空气质量预测 目录 时序预测 | Python实现NARX-DNN空气质量预测效果一览基本介绍研究内容程序设计参考资料效果一览 基本介绍 时序预测 | Python实现NARX-DNN空气质量预测 研究内容 Python实现NARX-DNN空气质量预测,使用深度神经网络对比利时空气…
阅读更多...
Hive数据仓库

Hive数据仓库

数据仓库概念与起源发展由来 数仓概念 数据仓库&#xff08;英语&#xff1a;Data Warehouse&#xff0c;简称数仓、DW&#xff09;&#xff0c;是一个用于存储、分析、报告的数据系统。数据仓库的目的是构建面相分析的集成化数据环境&#xff0c;分析结果为企业提供决策支持…
阅读更多...
使用docker部署一个jar项目

使用docker部署一个jar项目

简介: 通过docker镜像, docker可以在服务器上运行包含项目所需运行环境的docker容器, 在线仓库里有很多各个软件公司官方发布的镜像, 或者第三方的镜像. 如果我们需要使用docker把我们的应用程序打包成镜像, 别的机器上只要安装了docker, 就可以直接运行镜像, 而不需要再安装应…
阅读更多...
LabVIEW使用灰度和边缘检测进行视频滤波

LabVIEW使用灰度和边缘检测进行视频滤波

LabVIEW使用灰度和边缘检测进行视频滤波 数字图像处理&#xff08;DIP&#xff09;是真实和连续世界的离散表示。除此之外&#xff0c;这种数字图像在通信、医学、遥感、地震学、工业自动化、机器人、航空航天和教育等领域变得非常重要。计算机技术越来越需要视频图像的数字图…
阅读更多...
软件测试这个行业究竟能做到多少岁？35岁真的是一个坎？

软件测试这个行业究竟能做到多少岁？35岁真的是一个坎？

前言 在国内&#xff0c;软件测试行业是近10多年来随着互联网的飞速发展逐步兴起来的。 随着行业的发展&#xff0c;测试市场的人才缺口也越来越大&#xff0c;能够提供的就业机会也就越来越多&#xff0c;所以很多人都意气风发地投身到测试行业之中&#xff0c;憧憬这自己在这…
阅读更多...
数据结构 | 递归

数据结构 | 递归

目录 一、何谓递归 1.1 计算一列数之和 1.2 递归三原则 1.3 将整数转换成任意进制的字符串 二、栈帧&#xff1a;实现递归 三、递归可视化 四、谢尔平斯基三角形 五、复杂的递归问题 六、动态规划 一、何谓递归 递归是解决问题的一种办法&#xff0c;它将问题不断地分…
阅读更多...
css滚动条样式指南

css滚动条样式指南

css滚动条样式指南 滚动条是网页设计中经常被忽视的元素。虽然它看起来像是一个小细节&#xff0c;但它在网站导航中起着至关重要的作用。默认的滚动条可能看起来不合适&#xff0c;有损整体美观。本文将介绍如何使用 CSS 自定义滚动条。 在 Chrome、Edge 和 Safari 中设置滚…
阅读更多...
机器学习笔记之优化算法(六)线搜索方法(步长角度；非精确搜索；Glodstein Condition)

机器学习笔记之优化算法(六)线搜索方法(步长角度；非精确搜索；Glodstein Condition)

机器学习笔记之优化算法——线搜索方法[步长角度&#xff0c;非精确搜索&#xff0c;Glodstein Condition] 引言回顾&#xff1a; Armijo Condition \text{Armijo Condition} Armijo Condition关于 Armijo Condition \text{Armijo Condition} Armijo Condition的弊端 Glodstein…
阅读更多...
【限时优惠】红帽openstack管理课程(CL210) 即将开课

【限时优惠】红帽openstack管理课程(CL210) 即将开课

课程介绍 通过实验室操作练习&#xff0c;学员将能够深入学习红帽企业 Linux OpenStack 平台各服务的手动安装方法&#xff0c;还将了解 OpenStack 开发社区的未来发展计划。 培训地点&#xff1a; 线下面授&#xff1a;苏州市姑苏区干将东路666号401室&#xff1b; 远程…
阅读更多...
Arcgis地图实战一：单个图层中设施的隐藏及显示

Arcgis地图实战一：单个图层中设施的隐藏及显示

文章目录 1.效果图预览2.弹框的实现3.显示及隐藏的实现 1.效果图预览 2.弹框的实现 let alert this.alertCtrl.create();alert.setTitle(请选择设施);for (let item of this.ctralllayers) {alert.addInput({type: checkbox,label: item.name,value: item.id,checked: item.vi…
阅读更多...
二、数据结构10：堆 模板题+算法模板（堆排序，模拟堆）

二、数据结构10：堆 模板题+算法模板（堆排序，模拟堆）

文章目录 算法模板堆题目代码模板堆的原理down操作理解&#xff1a;up操作理解建堆操作关于heap_swap中存的映射数组理解&#xff08;模拟堆题目中用到&#xff09; 模板题堆排序原题链接题目思路题解 模拟堆原题链接题目思路题解 算法模板 堆题目代码模板 // h[N]存储堆中的…
阅读更多...
2023年FPGA好就业吗？

2023年FPGA好就业吗？

FPGA岗位有哪些&#xff1f; 从芯片设计流程来看&#xff0c;FPGA岗位可以分四类 产品开发期&#xff1a;FPGA系统架构师 芯片设计期&#xff1a;数字IC设计工程师、FPGA开发工程师 芯片流片期&#xff1a;FPGA验证工程师 产品维护期&#xff1a;FAE工程师 从行业上来说&#x…
阅读更多...
前端学习——Vue (Day9)

前端学习——Vue (Day9)

Pinia 快速入门 https://pinia.vuejs.org/zh/getting-started.html npm install pinia import { createApp } from vue import { createPinia } from pinia import App from ./App.vueconst pinia createPinia() const app createApp(App)app.use(pinia) app.mount(#app)&l…
阅读更多...
Array.prototype.slice.call()方法详解

Array.prototype.slice.call()方法详解

slice:用来截取截取字符串方法Array: javascript的一个引用类型&#xff0c;其原型prototype上有一个方法叫slicecall和apply &#xff1a; 用来改变对象中函数内部的this引用&#xff0c;使得函数可以随便换‘妈妈’ 为什么不直接用 arguments.slice(1)呢 不是一样的么? 答案…
阅读更多...
消息中间件应用场景介绍

消息中间件应用场景介绍

提高系统性能首先考虑的是数据库的优化&#xff0c;但是数据库因为历史原因&#xff0c;横向扩展是一件非常复杂的工程&#xff0c;所有我们一般会尽量把流量都挡在数据库之前。 不管是无限的横向扩展服务器&#xff0c;还是纵向阻隔到达数据库的流量&#xff0c;都是这个思路。…
阅读更多...
最新版本mac版Idea 激活Jerbel实现热部署

最新版本mac版Idea 激活Jerbel实现热部署

1.环境准备 1.安装docker desktop 客户端创建本地服务 2.创建guid 3.随便准备一个正确格式的邮箱 2.具体操作 1.通过提供的镜像直接搭建本地服务 docker pull qierkang/golang-reverseproxy docker run -d -p 8888:8888 qierkang/golang-reverseproxy2.guid 通过如下网址直…
阅读更多...
使用docker搭建nacos

使用docker搭建nacos

使用docker搭建nacos docker搭建最新版nacosMySQL下简历nacos配置数据表拉取镜像创建挂载目录启动容器访问nacos docker搭建nacos 2.0版本 docker搭建最新版nacos 最近想在自己服务器上搭建一个nacos服务&#xff0c;以前一直在本地的windows上使用&#xff0c;而且使用着naco…
阅读更多...
iOS 搭建组件化私有库

iOS 搭建组件化私有库

一、创建私有库索引 步骤1是在没有索引库的情况下或者是新增索引的时候才需要用到&#xff08;创建基础组件库&#xff09; 首先在码云上建立一个私有库索引&#xff0c;起名为SYComponentSpec 二、本地添加私有库索引 添加私有库索引 pod repo add SYComponentSpec https:/…
阅读更多...
最新文章

Copyright @ 2022~2023