天地图坐标拾取

最新推荐文章于 2024-04-29 11:00:00 发布
最新推荐文章于 2024-04-29 11:00:00 发布
阅读量5.8k 收藏 7
点赞数 4
分类专栏： 地图——天地图 文章标签： 坐标拾取 天地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yb305/article/details/118183430
版权 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－根据关键字本地搜索</title>
    <style type="text/css">
        .search {
            font-size: 13px;
            border: 1px solid #999999;
			background: #5677fc;
			color: #fff;
			border: none;
			margin-left: -6px;
			padding: 8px 15px;
			border-radius: 0px 4px 4px 0px;
        }

        .ls {
            line-height: 27px;
            padding-left: 7px;
        }

        .prompt {
            display: none;
            font-size: 13px;
            border: 1px solid #999999;
        }

        .statistics {
            display: none;
            font-size: 13px;
            border: 1px solid #999999;
            overflow-y: scroll;
            height: 150px;
        }

        .suggests {
            display: none;
            font-size: 13px;
            border: 1px solid #999999;
        }

        ;
        .lineData {
            display: none;
            font-size: 13px;
            border: 1px solid #999999;
        }

        .result {
            display: none;
            font-size: 12px;
            border: 1px solid #999999;
            line-height: 27px;
            padding-left: 7px;
        }
    </style>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></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>
    <script>
        var map;
        var zoom = 12;
        var localsearch;
        function onLoad() {
            //初始化地图对象
            map = new T.Map("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
 			var cp = new T.CoordinatePickup(map, {callback: getLngLat})
            cp.addEvent();
          
            var config = {
                pageCapacity: 10,	//每页显示的数量
                onSearchComplete: localSearchResult	//接收数据的回调函数
            };
            //创建搜索对象
            localsearch = new T.LocalSearch(map, config);
        }

        function localSearchResult(result) {
            //清空地图及搜索列表
            clearAll();

            //添加提示词
            prompt(result);

            //根据返回类型解析搜索结果
            switch (parseInt(result.getResultType())) {
                case 1:
                    //解析点数据结果
                    pois(result.getPois());
                    break;
                case 2:
                    //解析推荐城市
                    statistics(result.getStatistics());
                    break;
                case 3:
                    //解析行政区划边界
                    area(result.getArea());
                    break;
                case 4:
                    //解析建议词信息
                    suggests(result.getSuggests());
                    break;
                case 5:
                    //解析公交信息
                    lineData(result.getLineData());
                    break;
            }
        }

        //解析提示词
        function prompt(obj) {
            var prompts = obj.getPrompt();
            if (prompts) {
                var promptHtml = "";
                for (var i = 0; i < prompts.length; i++) {
                    var prompt = prompts[i];
                    var promptType = prompt.type;
                    var promptAdmins = prompt.admins;
                    var meanprompt = prompt.DidYouMean;
                    if (promptType == 1) {
                        promptHtml += "<p>您是否要在" + promptAdmins[0].name + "</strong>搜索更多包含<strong>" + obj.getKeyword() + "</strong>的相关内容？<p>";
                    }
                    else if (promptType == 2) {
                        promptHtml += "<p>在<strong>" + promptAdmins[0].name + "</strong>没有搜索到与<strong>" + obj.getKeyword() + "</strong>相关的结果。<p>";
                        if (meanprompt) {
                            promptHtml += "<p>您是否要找：<font weight='bold' color='#035fbe'><strong>" + meanprompt + "</strong></font><p>";
                        }
                    }
                    else if (promptType == 3) {
                        promptHtml += "<p style='margin-bottom:3px;'>有以下相关结果，您是否要找：</p>"
                        for (i = 0; i < promptAdmins.length; i++) {
                            promptHtml += "<p>" + promptAdmins[i].name + "</p>";
                        }
                    }
                }
                if (promptHtml != "") {
                    document.getElementById("promptDiv").style.display = "block";
                    document.getElementById("promptDiv").innerHTML = promptHtml;
                }
            }
        }

        //解析点数据结果
        function pois(obj) {
            if (obj) {
                //显示搜索列表
                var divMarker = document.createElement("div");
                //坐标数组，设置最佳比例尺时会用到
                var zoomArr = [];
                for (var i = 0; i < obj.length; i++) {
                    //闭包
                    (function (i) {
                        //名称
                        var name = obj[i].name;
                        //地址
                        var address = obj[i].address;
                        //坐标
                        var lnglatArr = obj[i].lonlat.split(" ");
                        var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);

                        var winHtml = "名称:" + name + "<br/>地址:" + address+"<br/>经纬度:" + lnglatArr[0]+","+lnglatArr[1];

                        //创建标注对象
                        var marker = new T.Marker(lnglat);
                        //地图上添加标注点
                        map.addOverLay(marker);
                        //注册标注点的点击事件
                        var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
                        marker.addEventListener("click", function () {
                            marker.openInfoWindow(markerInfoWin);
                        });

                        zoomArr.push(lnglat);

                        //在页面上显示搜索的列表
                        var a = document.createElement("a");
                        a.href = "javascript://";
                        a.innerHTML = name;
                        a.onclick = function () {
                            showPosition(marker, winHtml);
                        }
                        divMarker.appendChild(document.createTextNode((i + 1) + "."));
                        divMarker.appendChild(a);
                        divMarker.appendChild(document.createElement("br"));
                    })(i);
                }
                //显示地图的最佳级别
                map.setViewport(zoomArr);
                //显示搜索结果
                divMarker.appendChild(document.createTextNode('共' + localsearch.getCountNumber() + '条记录，分' + localsearch.getCountPage() + '页,当前第' + localsearch.getPageIndex() + '页'));
                document.getElementById("searchDiv").appendChild(divMarker);
                document.getElementById("resultDiv").style.display = "block";
            }
        }

        //显示信息框
        function showPosition(marker, winHtml) {
            var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
            marker.openInfoWindow(markerInfoWin);
        }

        //解析推荐城市
        function statistics(obj) {
            if (obj) {
                //坐标数组，设置最佳比例尺时会用到
                var pointsArr = [];
                var priorityCitysHtml = "";
                var allAdminsHtml = "";
                var priorityCitys = obj.priorityCitys;
                if (priorityCitys) {
                    //推荐城市显示
                    priorityCitysHtml += "在中国以下城市有结果<ul>";
                    for (var i = 0; i < priorityCitys.length; i++) {
                        priorityCitysHtml += "<li>" + priorityCitys[i].name + "(" + priorityCitys[i].count + ")</li>";
                    }
                    priorityCitysHtml += "</ul>";
                }

                var allAdmins = obj.allAdmins;
                if (allAdmins) {
                    allAdminsHtml += "更多城市<ul>";
                    for (var i = 0; i < allAdmins.length; i++) {
                        allAdminsHtml += "<li>" + allAdmins[i].name + "(" + allAdmins[i].count + ")";
                        var childAdmins = allAdmins[i].childAdmins;
                        if (childAdmins) {
                            for (var m = 0; m < childAdmins.length; m++) {
                                allAdminsHtml += "<blockquote>" + childAdmins[m].name + "(" + childAdmins[m].count + ")</blockquote>";
                            }
                        }
                        allAdminsHtml += "</li>"
                    }
                    allAdminsHtml += "</ul>";
                }
                document.getElementById("statisticsDiv").style.display = "block";
                document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;
            }
        }

        //解析行政区划边界
        function area(obj) {
            if (obj) {
            	if(obj.points){
            		//坐标数组，设置最佳比例尺时会用到
                    var pointsArr = [];
                    var points = obj.points;
                    for (var i = 0; i < points.length; i++) {
                        var regionLngLats = [];
                        var regionArr = points[i].region.split(",");
                        for (var m = 0; m < regionArr.length; m++) {
                            var lnglatArr = regionArr[m].split(" ");
                            var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                            regionLngLats.push(lnglat);
                            pointsArr.push(lnglat);
                        }
                        //创建线对象
                        var line = new T.Polyline(regionLngLats, {
                            color: "blue",
                            weight: 3,
                            opacity: 1,
                            lineStyle: "dashed"
                        });
                        //向地图上添加线
                        map.addOverLay(line);
                    }
                    //显示最佳比例尺
                    map.setViewport(pointsArr);
            	}
            	if(obj.lonlat){
            		var regionArr = obj.lonlat.split(",");
            		map.panTo(new T.LngLat(regionArr[0], regionArr[1]));
            	}
            }
        }

        //解析建议词信息
        function suggests(obj) {
            if (obj) {
                //建议词提示，如果搜索类型为公交规划建议词或公交站搜索时，返回结果为公交信息的建议词。
                var suggestsHtml = "建议词提示<ul>";
                for (var i = 0; i < obj.length; i++) {
                    suggestsHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>" + obj[i].address + "</font></li>";
                }
                suggestsHtml += "</ul>";
                document.getElementById("suggestsDiv").style.display = "block";
                document.getElementById("suggestsDiv").innerHTML = suggestsHtml;
            }
        }

        //解析公交信息
        function lineData(obj) {
            if (obj) {
                //公交提示
                var lineDataHtml = "公交提示<ul>";
                for (var i = 0; i < obj.length; i++) {
                    lineDataHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>共" + obj[i].stationNum + "站</font></li>";
                }
                lineDataHtml += "</ul>";
                document.getElementById("lineDataDiv").style.display = "block";
                document.getElementById("lineDataDiv").innerHTML = lineDataHtml;
            }
        }

        //清空地图及搜索列表
        function clearAll() {
            map.clearOverLays();
            document.getElementById("searchDiv").innerHTML = "";
            document.getElementById("resultDiv").style.display = "none";
            document.getElementById("statisticsDiv").innerHTML = "";
            document.getElementById("statisticsDiv").style.display = "none";
            document.getElementById("promptDiv").innerHTML = "";
            document.getElementById("promptDiv").style.display = "none";
            document.getElementById("suggestsDiv").innerHTML = "";
            document.getElementById("suggestsDiv").style.display = "none";
            document.getElementById("lineDataDiv").innerHTML = "";
            document.getElementById("lineDataDiv").style.display = "none";
        }
      
         function getLngLat(lnglat) {
            document.getElementById("lnglatStr").value = lnglat.lng.toFixed(6) + "," + lnglat.lat.toFixed(6);
        }
    </script>
</head>
<body onLoad="onLoad()" style="height:100%">

<div style="height:50px;line-height:50px;margin:0px 15px 0px;">
    <img src="http://api.tianditu.gov.cn/v4.0/image/logo.png" style="float: left;display: inline-block;padding-top: 16px;"/>
    <input type="text" id="keyWord" value="天安门" style="height:26px;width:230px;"/>
    <input type="button" class="search" onClick="localsearch.search(document.getElementById('keyWord').value)" value="搜索"/>
    <span style="margin-left:40px;">拾取坐标点位置：  <input type="text" id="lnglatStr" value="" style="height:26px;"/></span>
</div>

<div style="display:flex;flex-column:rows;height: calc(100vh - 53px);
    overflow: hidden;">
	<div id="mapDiv" style="flex:5;height:100%;display:inline-block"></div>
	<div style="flex:2;height:100%;border:1px solid #cdcd">
		 <p>本示例演示如何根据关键字本地搜索。</p>
		<!-- 提示词面板 -->
		<div id="promptDiv" class="prompt"></div>
		<!-- 统计面板 -->
		<div id="statisticsDiv" class="statistics"></div>
		<!-- 建议词面板 -->
		<div id="suggestsDiv" class="suggests"></div>
		<!-- 公交提示面板 -->
		<div id="lineDataDiv" class="lineData"></div>
		<!-- 搜索结果面板 -->
		<div id="resultDiv" class="result">
			<div id="searchDiv"></div>
			<div id="pageDiv">
				<input type="button" value="第一页" onClick="localsearch.firstPage()"/>
				<input type="button" value="上一页" onClick="localsearch.previousPage()"/>
				<input type="button" value="下一页" onClick="localsearch.nextPage()"/>
				<input type="button" value="最后一页" onClick="localsearch.lastPage()"/>
				<br/>
				转到第<input type="text" value="1" id="pageId" size="3"/>页
				<input type="button" onClick="localsearch.gotoPage(parseInt(document.getElementById('pageId').value));"
					   value="转到"/>
			</div>
		</div>
	</div>

</div>

</body>
</html>

yb305小白
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
天地图拾取坐标map.html
11-08
天地图拾取坐标map.html
天地图坐标拾取demo
cc蒲公英的博客
09-27 790
天地图坐标拾取demo
vue3中天地图坐标拾取器回填到input中
最新发布
wch19960518的博客
04-29 220
经纬度，回填到输入框中，最终一块将数据提交到接口。下面为坐标拾取器弹窗组件。
天地图-坐标拾取
qq_44681558的博客
03-26 1715
在网页使用高德，百度地图这些时，会因为没有购买他们的使用版权，从而出现以下水印，因此需要换一个地图-天地图 天地图官方文档：http://lbs.tianditu.gov.cn/ 然而天地图并不像其他地图一样这么方便，比如没有可以通过地址搜索，直接可以获取坐标的，因此可以小改动一下，方便自己使用。
天地图获取点击位置的经纬度
qq_41117545的博客
10-30 1万+
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地图"/> <title>天地图－地图API－范例－地图拾取器</title> <style type="text/css"> .
天地图-拾取经纬度坐标-实例
05-11
天地图-拾取经纬度坐标-实例
天地图连续拾取经纬度坐标
05-19
天地图连续拾取经纬度坐标
vue3移动端腾讯地图坐标拾取，获取当前定位（腾讯、高德、百度、天地图），火星坐标GCJ-02–＞百度坐标BD-09，根据坐标经纬度计算两点距离的方法，点击链接打开地图导航的方法
weixin_44308055的博客
05-09 6091
文章目录前言地图选点（坐标拾取）一、调用示例二、调用方法获取当前定位一、调用示例二、调用方法other：高德地图、百度地图、天地图获取当前定位的方法一、高德地图二、百度地图（支持异步加载）三、天地图腾讯、高德、百度地图坐标系相互转换的方法（火星坐标GCJ-02–>百度坐标BD-09）根据坐标经纬度计算两点距离的方法点击链接打开地图导航的方法总结 前言 具体请参考腾讯地图开发者平台 https://lbs.qq.com/webApi tips: 1、无论是腾讯地图还是高德、百度、天地图，都建议使用ht
天地图-拾取坐标V1.3
01-12
天地图-拾取坐标， 坐标点线面锚点 百度地图坐标的批量拾取工具。可以用画点、线、面的方式批量获取坐标，可获取绘制区域的面积，默认生成JSON格式如下： [{"lat":23.21232,"lng":113.02812},{"lat":23.20072,"lng...
天地图搜索及获取经纬度工具
12-16
"天地图搜索及获取经纬度工具"是一款专为天地图设计的应用程序，它结合了地图搜索和坐标获取的功能，使得用户能够方便地在地图上定位并标记特定的地理位置。这款工具对于需要精确地理信息的场景非常实用，比如测绘、...
vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
hui_54520的博客
06-24 5735
vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
天地图搜索及获取经纬度工具 （含大量注释对于初学很有帮助）
09-24
天地图搜索及获取经纬度工具 （含大量注释对于初学很有帮助）
vue集成“天地图”实现点击地图获取选中的地址和经纬度
RE_Z002的博客
10-10 1723
Vue集成“天地图”实现点击地图获取选中的地址和经纬度
使用天地图进行定位，获取坐标位置及省市等信息
and_bjdbc的博客
04-28 2万+
天地图定位，必须传入mapview，如果想不显示地图，直接获取定位，只需要自己new一个mapview对象传入即可。
天地图经纬度精确拾取的方法
热门推荐
qq_30908729的博客
05-30 2万+
天地图经纬度精确拾取的方法？解决方法：http://yayihouse.com/yayishuwu/chapter/1250
使用天地图服务为地名数据找到地理坐标
12-26 2054
起因是 x老师想从微信公布的中国历史文化名镇名村拟公布名单里，找出对应镇、村的地理坐标。 名单里的镇、村信息其实格式非常标准，也很完整，如下： 第一反应是希望查找天地图接口中的行政区划API，因为该接口可以返回对应行政区划的面状要素信息。 但是通过阅读接口说明，我们发现：行政区接口仅返回县级以上行政区划信息。而我们需要的是镇、村信息。 因此，只能放弃，将村镇信息作为“地名...
vue获取当前坐标并通过天地图逆转码为省市区
m0_45857808的博客
07-04 1591
获取当前经纬度 转为省市区
输入经纬度查询位置
漂石的手艺（技术）活儿
04-07 1万+
3）进入平台，菜单中找到“开发支持” ->“地图工具”->“坐标拾取器”1）进入百度地图：https://map.baidu.com/1）进入百度地图：https://www.amap.com/3）进入平台下拉，找到“工具支持” -> “坐标拾取器”4）勾选“按坐标搜索”，输入经纬度（以英文逗号隔开）4）勾选“坐标反查”，输入经纬度（以英文逗号隔开）备注：百度地图手机端App，暂不支持。备注：高德地图手机端App，暂不支持。2）点击下方的“地图开放平台”2）点击下方的“开放平台”
vue 天地图 坐标拾取器
08-18
Vue 天地图坐标拾取器是一个基于Vue框架开发的工具，用于在天地图地图上选择和获取地理坐标。它可以帮助用户方便地在地图上选取位置，并提供相应的坐标信息。 该拾取器的主要功能有以下几个方面： 1. 地图展示：通过调用天地图API，拾取器能够在Vue组件中显示一个交互式的天地图，并提供地图放大、缩小、拖动等常用操作功能。 2. 坐标拾取：拾取器允许用户在地图上点击选择一个位置，并实时显示所选位置的经纬度坐标。用户可以通过点击地图上的任意地点来获取对应的坐标信息。 3. 坐标展示：拾取器会在界面上显示所选位置的经纬度坐标信息，并且可以将坐标信息保存到Vue组件的数据中，方便进行后续的处理和使用。 4. 自定义操作：除了基本的坐标拾取功能外，拾取器还可以根据项目需要进行一些自定义操作。比如可以设置默认的地图中心点、地图缩放级别，以及地图样式等。 总的来说，Vue天地图坐标拾取器是一个集成了天地图API的Vue组件，能够方便地在天地图上选择和获取地理坐标。它的使用可以提高地图操作的便利性，为开发者在地图应用中提供更多的可定制化功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值