百度地图点标记加调用

先看效果

在这里插入图片描述

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>

原文链接：https://blog.csdn.net/qq_19716091/article/details/132020831

你可能也喜欢