天地图web端 通过H5 获取详细定位信息 (模板源码)

最近在做的项目需要用的天地图,置于为哈不用高德或者其他的…只能说,免费有免费的好处,收费有收费的好处吧
天地图web端 通过H5 获取详细定位信息 (模板源码)_第1张图片
下面是源码,在对应位置加上你的key即可 (用PC端打开的话只能定位到城市,用手机浏览器打开的话可以定位到精确位置100米范围

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="天地图" />
		<title>天地图-地图API-web定位并获取详细地址</title>
		<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的KEY"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<style type="text/css">
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "Microsoft YaHei"
			}

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

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

	</head>

	<body onLoad="onLoad()">

		<div id="mapDiv"></div>
		<p>H5定位所在城市</p>
		<span id="localInfo"></span><br/>
		<span id="zuobiao"></span>

		<script>
			var map;
			
			//天地图key
			const mapKey = "你的KEY";

			//初始化地图级别
			var zoom = 12;

			//当前位置
			var detaillocation;

			//加载地图
			function onLoad() {

				//初始化地图对象
				map = new T.Map("mapDiv");

				//设置显示地图的中心点和级别
				map.centerAndZoom(new T.LngLat(116.40969, 38.89945), zoom);

				//创建地图类型控件对象
				var _mapType = new T.Control.MapType();

				//添加地图类型控件
				map.addControl(_mapType);

				//创建缩放平移控件对象
				_zoomControl = new T.Control.Zoom();

				//添加缩放平移控件
				map.addControl(_zoomControl);

				//创建缩放平移控件对象
				_zoomControl.setPosition(T_ANCHOR_TOP_LEFT);

				//创建定位对象lo
				var lo = new T.Geolocation();

				//创建右键菜单对象
				var menu = new T.ContextMenu({
					width: 140
				});

				//添加右键菜单
				var txtMenuItem = [{
						text: '放大',
						callback: () => {
							map.zoomIn()
						}
					},
					{
						text: '缩小',
						callback: () => {
							map.zoomOut()
						}
					},
					{
						text: '放置到最大级',
						callback: () => {
							map.setZoom(18)
						}
					},
					{
						text: '查看全国',
						callback: () => {
							map.setZoom(4)
						}
					},
					{
						text: '获得右键点击处坐标',
						isDisable: false,
						callback: (lnglat) => {
							alert(lnglat.getLng() + "," + lnglat.getLat());
						}
					}
				];

				for (var i = 0; i < txtMenuItem.length; i++) {
					//添加菜单项
					var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
					//item.disable();
					menu.addItem(item);
					if (i == 1 || i == 3) {
						//添加分割线
						menu.addSeparator();
					}
				}

				//装载菜单
				map.addContextMenu(menu);

				//定位回调函数
				fn = function(e) {

					//当前为移动端时
					if (this.getStatus() == 0) {
						map.centerAndZoom(e.lnglat, 15)
						console.log(e);
						//获取地理位置信息并设置到标注
						getDetailLocation(e.lnglat, e.lnglat);

					}

					//当前为PC端时
					if (this.getStatus() == 1) {
						map.centerAndZoom(e.lnglat, e.level)
						console.log(e);
						//获取地理位置信息并设置到标注
						getDetailLocation(e.lnglat, e.lnglat);
					}
				}

				//设置标注
				function setMarker(e) {
					var marker = new T.Marker(e);
					map.addOverLay(marker);
					var markerInfoWin = new T.InfoWindow("" + detaillocation);
					marker.addEventListener("click", function() {
						marker.openInfoWindow(markerInfoWin);
					});
				}

				//通过经纬度获取详细地址
				function getDetailLocation(lnglat_lng, lnglat_lat) {
					$.ajax({
						url: "https://api.tianditu.gov.cn/geocoder",
						type: 'GET',
						contentType: "application/json;charset=utf-8",
						data: {
							tk: mapKey,
							type: "geocode",
							postStr: "{'lon':" + lnglat_lng.lng + ",'lat':" + lnglat_lat.lat + ",'ver':1}"
						},
						success: (data) => {
							var addressdata = eval("(" + data + ")");
							console.log(addressdata);
							//截取地址信息显示在span上
							detaillocation = addressdata.result.formatted_address;
							$("#localInfo").text(detaillocation + "->" + (new Date()).toLocaleDateString());
							$("#zuobiao").text("坐标->"+lnglat_lng.lng+","+lnglat_lat.lat);
							console.log(detaillocation);
							
							if (addressdata.msg == "ok" && addressdata.status == 0) {
								//将位置信息设置到标注
								setMarker(lnglat_lat);
							} else {
								//dosomething
							}
						},
						error: (er, er1, er2) => {
							alert("获取失败");
						}
					});

				}
				
				//开始定位
				lo.getCurrentPosition(fn);
				
			}
		</script>

	</body>
</html>

你可能感兴趣的:(前端,jQuery)