经纬度的实现

最新推荐文章于 2023-08-14 14:02:54 发布
小白java程序员
最新推荐文章于 2023-08-14 14:02:54 发布
阅读量164
点赞数
文章标签： lua
本文链接：https://blog.csdn.net/qq_50966209/article/details/120488733
版权
经纬度

//地图
//把地图单独做成一个页面，之后在调用
//有特殊要求的可以去天地图自行下载
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="天地图" />
		<title>经纬度坐标拾取器</title>
		<link rel="stylesheet" href="/lib/layui-v2.5.6/css/layui.css" media="all">
		<script type="text/javascript" src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script src="/lib/layui-v2.5.6/layui.all.js" charset="utf-8"></script>
		<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=a6db954459451c78628c3fc0bece9c1f"></script>
		<style type="text/css">
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 0;
			}

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

			input,
			b,
			p {
				margin-left: 5px;
				font-size: 14px
			}

			.mapbutton {
				position: absolute;
				top: 10px;
				right: 10px;
				z-index: 9999;
			}

			.tdt-iconLayers-layer {
				top: 45px
			}
		</style>
	</head>
	<body onLoad="onLoad()">
		<div id="mapDiv"></div>
		<div class="mapbutton">
			<input type="hidden" id="lng" />
			<input type="hidden" id="lat" />
			<button type="button" class="layui-btn layui-btn-normal" id="sureGpsBtn">确定</button>
			<button type="button" class="layui-btn layui-btn-normal" id="cancelGpsBtn">取消</button>
		</div>
		<script src="/js/smart-common.js"></script>
		<script>
			//地图中心点
			var mapCenter = {
				'wendeng': [122.011410, 37.072710]
			}
			//行政区边界
			var orgBounds = {
				'wendeng': []
			}
			//当前城市
			var curCity = "wendeng";
			//加载行政区边界数据
			function loadOrgBounds() {
				$.ajax({
					url: smart.getRootPath() + "/page/map/" + curCity + ".js",
					success: function(data) {
						if (!data) {
							return;
						}
						var orgBoundsData = eval('(' + data + ')');
						orgBounds[curCity] = [];
						for (i = 0; i < orgBoundsData.length; i++) {
							var polygonPoints = [];
							for (j = 0; j < orgBoundsData[i].length; j++) {
								polygonPoints.push(new T.LngLat(orgBoundsData[i][j].split(' ')[0], orgBoundsData[i][j].split(' ')[1]));
							}
							var polygon = new T.Polygon(polygonPoints, {
								color: "#3dfbd5",
								weight: 3,
								opacity: 1,
								fillColor: "#FFFFFF",
								fillOpacity: 0,
								lineStyle: "dashed"
							});
							orgBounds[curCity].push(polygon);
						}
						showOrgBounds();
					}
				});
			}
			
			//显示行政区边界
			function showOrgBounds() {
				var bounds = orgBounds[curCity];
				if (!bounds) {
					return;
				}
				for (var i = 0; i < bounds.length; i++) {
					map.addOverLay(bounds[i]);
				}
			}
			var map;
			var zoom = 12;

			function getQueryVariable(variable) {
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == variable) {
						return pair[1];
					}
				}
				return false;
			}

			function onLoad() {
				map = new T.Map('mapDiv');
				map.setMapType(TMAP_HYBRID_MAP);
				map.addControl(new T.Control.MapType());
				var lng = getQueryVariable('lng'),
					lat = getQueryVariable('lat');
				if (lng && lat) {
					map.centerAndZoom(new T.LngLat(lng, lat), zoom);
					var marker = new T.Marker(new T.LngLat(lng, lat));
					//向地图上添加标注
					map.addOverLay(marker);
					$('#lng').val(lng);
					$('#lat').val(lat);
				} else {
					//map.centerAndZoom(new T.LngLat(mapCenter[curCity][0], mapCenter[curCity][1]), zoom);
				}
				var cp = new T.CoordinatePickup(map, {
					callback: getLngLat
				})
				cp.addEvent();
				map.centerAndZoom(new T.LngLat(mapCenter[curCity][0], mapCenter[curCity][1]), zoom); //设置地图中心点坐标和地图级别
				loadOrgBounds();

			}

			function getLngLat(lnglat) {
				map.clearOverLays();
				loadOrgBounds();
				//创建标注对象
				var marker = new T.Marker(new T.LngLat(lnglat.lng, lnglat.lat));
				//向地图上添加标注
				map.addOverLay(marker);
				$('#lng').val(lnglat.lng.toFixed(6));
				$('#lat').val(lnglat.lat.toFixed(6));
			}
			$('#sureGpsBtn').click(function() {
				if ($('#lng').val() && $('#lat').val()) {
					var lnglat = {
						'lng': $('#lng').val(),
						'lat': $('#lat').val()
					}
					console.info(parent)
					parent.saveGps(lnglat);
				} else {
					layer.msg("请点击鼠标左键选择位置");
				}
			});
			$('#cancelGpsBtn').click(function() {
				parent.closeGpsWin();
			});
		</script>
	</body>
</html>

//表单
    <div class="layui-form-item">
        <div class="layui-inline layui-col-xs5">
            <label id="lngLa" class="layui-form-label required ">经度</label>
            <div class="layui-input-block">
                <input type="text" name="lng" id="lng" readonly lay-verify="required" lay-reqtext="经度不能为空"
                       placeholder="请选择经度" class="layui-input layAll">
            </div>
        </div>
        <div class="layui-inline layui-col-xs5">
            <label id="latLa" class="layui-form-label  required">纬度</label>
            <div class="layui-input-block">
                <input type="text" name="lat" id="lat" readonly lay-verify="required" lay-reqtext="纬度不能为空"
                       placeholder="请选择纬度" class="layui-input layAll">
            </div>
        </div>
        <div class="" align="center">
            <button type="button" class="layui-btn " id="selectGpsBtn">选择</button>
        </div>
    </div>
    

   //调用方法
        var selectGpsWin;
        //选择经纬度按钮绑定事件  打开弹窗
        $('#selectGpsBtn').click(function () {
            var selectGpsUrl = "/page/map/selectLngLat.html";
            if ($('#lng').val() && $('#lat').val()) {
                selectGpsUrl += '?lng=' + $('#lng').val() + '&lat=' + $('#lat').val();
            }
            selectGpsWin = layer.open({
                title: '点击获取经纬度',
                type: 2,
                shade: 0.2,
                shadeClose: false,
                area: ['1000px', '800px'],
                content: selectGpsUrl
            });
        });

        //选择经纬度弹窗取消按钮 关闭选择经纬度弹窗
        window.closeGpsWin = function () {
            layer.close(selectGpsWin);
        }

        //选择经纬度弹窗确定按钮回调方法
        window.saveGps = function (data) {
            $('#lng').val(data.lng);
            $('#lat').val(data.lat);
            layer.close(selectGpsWin);
        }