天地圖web端 通過H5 獲取詳細定位信息 (源碼)

最近在做的項目需要用的天地圖,置於爲哈不用高德或者其他的…只能說,免費有免費的好處,收費有收費的好處吧
下面是源碼,在對應位置加上你的key即可

<!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: function() {
							map.zoomIn()
						}
					},
					{
						text: '縮小',
						callback: function() {
							map.zoomOut()
						}
					},
					{
						text: '放置到最大級',
						callback: function() {
							map.setZoom(18)
						}
					},
					{
						text: '查看全國',
						callback: function() {
							map.setZoom(4)
						}
					},
					{
						text: '獲得右鍵點擊處座標',
						isDisable: false,
						callback: function(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: function(data) {
							var addressdata = eval("(" + data + ")");

							//截取地址信息顯示在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: function(er, er1, er2) {
							alert("獲取失敗");
						}
					});

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

	</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章