腾讯地图点标记加调用

已于 2023-07-31 14:26:31 修改
阅读量631 收藏
点赞数
分类专栏： PHP JavaScript HTML 文章标签： php thinkphp javascript
于 2023-07-31 10:46:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19716091/article/details/132017265
版权
PHP 同时被 3 个专栏收录
30 篇文章 1 订阅
订阅专栏
HTML
16 篇文章 0 订阅
订阅专栏
JavaScript
14 篇文章 0 订阅
订阅专栏

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

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>
普通人6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java调用腾讯地图根据经纬度获取位置信息
小四是个程序猿的博客
08-19 1929
这是java提交经纬度信息，然后获取该经纬度所在省市区的一个方法，话不多说直接上代码： package com.lmj.util; import net.sf.json.JSONObject; import org.apache.commons.lang.StringUtils; import javax.net.ssl.*; import java.io.ByteArrayOutputStream; import java.io.InputStream; import java.net.URL; im
腾讯地图、微信小程序、轨迹、路线图、marker标记点
05-27
首先申请腾讯地图key 配置安全域名 详细效果微信搜索小程序【城市科技行】查看
腾讯地图的聚合、描点、文字、点击大集合
07-23
腾讯地图的聚合+描点+文字+点击大集合
vue使用腾讯地图(包含点击获取位置，标点，输入文字匹配位置)
qq_47381208的博客
07-30 2206
vue使用腾讯地图(包含点击获取位置，标点，输入文字匹配位置)
腾讯地图拾取坐标html,记录腾讯地图点击地图获取标注坐标
weixin_35837926的博客
06-01 795
传递事件参数*{margin:0px;padding:0px;}body, button, input, select, textarea {font: 12px/16px Verdana, Helvetica, Arial, sans-serif;}p{width:603px;padding-top:3px;overflow:hidden;}#container{min-width:600px;...
vue3移动端腾讯地图坐标拾取，获取当前定位（腾讯、高德、百度、天地图），火星坐标GCJ-02–＞百度坐标BD-09，根据坐标经纬度计算两点距离的方法，点击链接打开地图导航的方法
weixin_44308055的博客
05-09 5808
文章目录前言地图选点（坐标拾取）一、调用示例二、调用方法获取当前定位一、调用示例二、调用方法other：高德地图、百度地图、天地图获取当前定位的方法一、高德地图二、百度地图（支持异步加载）三、天地图腾讯、高德、百度地图坐标系相互转换的方法（火星坐标GCJ-02–>百度坐标BD-09）根据坐标经纬度计算两点距离的方法点击链接打开地图导航的方法总结 前言 具体请参考腾讯地图开发者平台 https://lbs.qq.com/webApi tips: 1、无论是腾讯地图还是高德、百度、天地图，都建议使用ht
vue - vue使用腾讯api进行定位获取，绘制地图、标点、搜索、路线规划
热门推荐
qq_43886365的博客
03-10 1万+
vue使用腾讯地图api进行定位获取，绘制地图、标点、搜索、路线规划
引领位置服务驱动：腾讯地图 WebService 服务端 API 实用指南
最新发布
vnjohn 博主 > 主线分享后端领域业务设计知识、源码思想、架构设计
10-24 7923
该篇博文简单了介绍地理位置解析在我们实际开发中的应用，在配置管理中告知了如何一步步进行注册以及配置相关的产品信息，在地理位置解析中将博主自身运用地理位置服务时，所实现的部分相关源码告知大家如何运用封装及抽象的特性将你的代码构建的更好更优，最后，通过实际工作中经常会运用到四种接口来作了一层层的剥离及代码实战，希望能够得到你的支持+喜欢，再次感谢您能支持此文章！
小程序中规划地图路径在地图上显示、并且标记当前移动的位置
Bright2017的博客
03-30 6000
wxml <map id="map" longitude="113.324520" latitude="23.099994" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bind...
腾讯地图实现站点标记，及已标记的点回显在地图上
yolo_link的博客
10-10 2197
腾讯地图实现点标记及回显操作。使用过程中可能会遇到："ReferenceError: TMap is not defined"，"ReferenceError: TMap is not defined"，地图不会重绘，容器内出现多个地图实例等问题，相关的解决方案文中都有对应的解释。
腾讯地图定位2个demo（1.一个标记点，地图可点击。2.多个标记点，标记点可以点击并显示信息）
11-12
腾讯地图定位2个demo（1.一个标记点，地图可点击。2.多个标记点，标记点可以点击并显示信息）。替换自己的key可以正常运行
调用腾讯地图
06-04
调用腾讯地图源码
腾讯地图插件
03-29
为了帮助开发者们进一步“减负”，腾讯地图的插件添加了路线规划的能力，主要解决“向用户展示从A到B路线”的问题。使用插件的正确姿势究竟是什么呢？今天我们给大家介绍——腾讯地图插件的能力。       腾讯地图...
腾讯地图添加标记
u013521005的博客
07-30 4981
腾讯地图添加标记 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>腾讯坐标</title> <meta name="renderer" content="webkit"> <meta http-equiv...
PHP 汉字转换为拼音
qq_19716091的博客
06-07 7470
<?php class pinyin { private $pinyin_arr = array( "a" => "\u554a\u963f\u9515", "ai" => "\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc\u5ad2\u7477\u66a7\u7839\u953f\u972d", "an" =>
thinkPHP5.0伪静态
qq_19716091的博客
03-07 1797
的,上面这个伪静态平时没有影响,但是获取所有参数会多出来一个参数,如下图。这个伪静态参考了宝塔的Apache thinkPHP伪静态。thinkPHP5.0 URL重写文档。但是用下面的伪静态却没有问题,如下图。,但是官方的Nginx伪静态中是有。官方的Apache伪静态。postman下载地址。
PHP 微信支付v3签名生成
qq_19716091的博客
06-07 1748
签名生成方法 // 解析url $url_parts = parse_url($url); $canonical_url = ($url_parts['path'] . (!empty($url_parts['query']) ? "?${url_parts['query']}" : "")); // 获取时间戳 $timestamp = time(); // 获取随机字符串 $nonce = $this->randomString(32); // 拼接签名字段 $message = $method
thinkPHP 5.0 PHPExcel 读取文件
qq_19716091的博客
06-17 1632
PHPExcel文件下载。
小程序怎么调用腾讯地图卫星地图
03-28
要在小程序中调用腾讯地图卫星地图，需要使用腾讯地图开放平台提供的API接口。具体步骤如下： 1. 注册腾讯地图开放平台账号，并创建应用，获取API密钥。 2. 在小程序的页面中引入腾讯地图JSAPI SDK，可以通过以下代码实现： ``` <script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script> ``` 其中，YOUR_KEY是你在腾讯地图开放平台上申请的API密钥。 3. 在小程序中创建地图，并设置地图类型为卫星地图，可以通过以下代码实现： ``` var map = new qq.maps.Map(document.getElementById("map"), { center: new qq.maps.LatLng(39.916527,116.397128), zoom: 13, mapTypeId: qq.maps.MapTypeId.SATELLITE }); ``` 其中，new qq.maps.LatLng(39.916527,116.397128)是地图的中心点坐标，zoom是地图的缩放级别，mapTypeId.SATELLITE表示地图类型为卫星地图。 4. 在地图上添加标记点、路线等元素，可以通过相应的API接口实现。 以上是调用腾讯地图卫星地图的基本步骤，具体实现还需要根据具体需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值