pangdongxu
/
official_website

<!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="https://api.tianditu.gov.cn/api?v=4.0&tk=cc4aba6e967096098249efa069733067"></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><br/>
		<div style="width:84%;background:#CCFF66; text-color:#F00; font-size:50px; text-align:center; margin:auto;" onClick="closeWindow();">点击返回</div>

        <script>
            var map;
           
            //天地图key
            const mapKey = "cc4aba6e967096098249efa069733067";

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

            //当前位置
            var detaillocation;
			
			//返回坐标
			var textZb;

            //加载地图
            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) {

				//alert(JSON.stringify(e));
                    //当前为移动端时
                    if (this.getStatus() == 0) {
						textZb = (e.lnglat);
						console.log(textZb);
                        console.log("手机端："+e);
                        //获取地理位置信息并设置到标注
                        getDetailLocation(e.lnglat, e.lnglat);

                    }

                    //当前为PC端时
                    if (this.getStatus() == 1) {
                        map.centerAndZoom(e.lnglat, e.level)
                        console.log(e);
                        //获取地理位置信息并设置到标注
                        getDetailLocation("PC端："+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);
               
            }
			function closeWindow()
				{
					if(window.parent) // 跨域iframe传递数据
					{
						window.parent.postMessage(`LOCATION:${textZb ? JSON.stringify(textZb) : ''}`, '*');
					}
				console.log("返回");
				console.log(textZb);
				let chars = window.location.href.split("exiturl=")[1] || "";
				console.log(chars);
				location.href = `${chars}&lat=${textZb.lat}&lng=${textZb.lng}`;
				//window.opener.document.xxxxxx.value=text.value;
				window.close();
				}
        </script>

    </body>
</html>