高德地图根据关键词坐标拾取小工具

最新推荐文章于 2024-01-03 16:11:09 发布

weixin_34200628

最新推荐文章于 2024-01-03 16:11:09 发布

阅读量662

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhaoxuntao/p/3994975.html

版权

今天早上在写代码的时候，需要用到地图坐标拾取工具，我们用的是搞的地图，在高德地图API官方网站中没有找到相关的坐标拾取工具。在网上找到这么个小工具，与大家分享下！

CSS

 1  html { background-color: #fff; }
 2         body, div, h1, h2, h3, h4, ul, li, form, input, dl, dt, dd, p { margin: 0; padding: 0; font-family: 微软雅黑; }
 3         h3 { +font-size:14px; _font-size: 14px; }
 4         img { border: none; }
 5         .c { clear: both; }
 6         ul, ol, li { list-style: none; }
 7         .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; overflow: hidden; clear: both; }
 8         * html .clearfix { height: 1%; }
 9         * + html .clearfix { height: 1%; }
10         body { font: 12px/1.5em 微软雅黑,Arial,Verdana,Helvetica,sans-serif; color: #333; }
11         button, input, select, textarea { color: #999; }
12         input[type="button"] { padding: 0 5px; color: #333; }
13         .demo_box { width: 360px; }
14         #iCenter { width: 100%; height: 100%; border: 1px solid #F6F6F6; }
15         #r_title { line-height: 28px; padding-left: 5px; background-color: #D1EEEE; font-weight: bold; }
16         #result { overflow: auto; margin-bottom: 5px; /*    width:661px;*/ height: 500px; }
17         #result .sub_result { font-size: 12px; cursor: pointer; line-height: 20px; /*padding:0px 0 4px 2px;*/ border-bottom: 1px solid #C1FFC1; }
18         #result .sub_result .detail { }
19         #result .sub_result .detail h3 { color: #00A6AC; }
20         a { color: #067EC0; text-decoration: none; }
21         a:hover { text-decoration: underline; }
22         .note { color: #999; }
23         div.change { background-image: url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h.png); }
24         div.change div { background-image: url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h-l.gif); }
25         .markerContentStyle { position: relative; }
26         .markerContentStyle span { background-color: #FFFFFF; color: #FF1493; width: 120px; heigth: 80px; border: 2px solid #D8BFD8; FONT-FAMILY: 华文行楷; position: absolute; top: -10px; left: 25px; white-space: nowrap -webkit-border-radius:5px; border-radius: 5px; }
27         div.info { position: relative; z-index: 100; border: 1px solid #BCBCBC; box-shadow: 0 0 10px #B7B6B6; border-radius: 8px; background: rgb(255,255,255); /* The Fallback */ background-color: rgba(255,255,255,0.9); transition-duration: 0.25s; }
28         div.info:hover { box-shadow: 0px 0px 15px #0CF; }
29         div.info-top { position: relative; background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px solid #CCC; border-radius: 5px 5px 0 0; }
30         div.info-top div { display: inline-block; color: #333333; font-size: 14px; font-weight: bold; line-height: 31px; padding: 0 10px; }
31         div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0.25s; }
32         div.info-top img:hover { box-shadow: 0px 0px 5px #000; }
33         div.info-middle { font-size: 12px; padding: 10px; line-height: 21px; }
34         div.info-bottom { height: 0px; width: 100%; clear: both; text-align: center; }
35         div.info-bottom img { position: relative; z-index: 104; }
36         table { height: 100%; }
37         html, body { height: 100%; margin: 0px; padding: 0px; }
38         .STYLE1 { color: #F3F3F3; }

View Code

JS

 1 var mapObj;
 2         var marker = new Array();
 3         var windowsArr = new Array();
 4         //基本地图加载
 5         function mapInit() {
 6             mapObj = new AMap.Map("iCenter");
 7             //AMap.event.addListener(mapObj,'click',getLnglat);
 8         }
 9         function placeSearch() {
10             var MSearch;
11             mapObj.plugin(["AMap.PlaceSearch"], function () {
12                 MSearch = new AMap.PlaceSearch({ //构造地点查询类
13                     pageSize: 10,
14                     pageIndex: 1,
15                     city: "021" //城市
16                 });
17                 AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果
18                 var searchName = document.all.searchText.value;//查询关键字
19                 MSearch.search(searchName); //关键字查询
20             });
21         }
22         //添加marker&infowindow
23         function addmarker(i, d) {
24             var lngX = d.location.getLng();
25             var latY = d.location.getLat();
26             var markerOption = {
27                 map: mapObj,
28                 icon: "http://webapi.amap.com/images/" + (i + 1) + ".png",
29                 position: new AMap.LngLat(lngX, latY)
30             };
31 
32             var mar = new AMap.Marker(markerOption);
33             marker.push(new AMap.LngLat(lngX, latY));
34 
35             var infoWindow = new AMap.InfoWindow({
36                 content: "<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
37                 size: new AMap.Size(300, 0),
38                 autoMove: true,
39                 offset: new AMap.Pixel(0, -30)
40             });
41             windowsArr.push(infoWindow);
42             var aa = function (e) { infoWindow.open(mapObj, mar.getPosition()); };
43             AMap.event.addListener(mar, "click", aa);
44             AMap.event.addListener(mar, 'click', getLnglat);
45         }
46         //回调函数
47         function keywordSearch_CallBack(data) {
48             var resultStr = "";
49             var poiArr = data.poiList.pois;
50             var resultCount = poiArr.length;
51             for (var i = 0; i < resultCount; i++) {
52                 resultStr += "<div id='divid" + (i + 1) + "' οnclick='openMarkerTipById1(" + i + ",this)' οnmοuseοut='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
53                 resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
54                 addmarker(i, poiArr[i]);
55             }
56             mapObj.setFitView();
57             document.getElementById("result").innerHTML = resultStr;
58 
59         }
60         function TipContents(type, address, tel) {  //窗体内容
61             if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
62                 type = "暂无";
63             }
64             if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
65                 address = "暂无";
66             }
67             if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
68                 tel = "暂无";
69             }
70             var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type;
71             return str;
72         }
73         function openMarkerTipById1(pointid, thiss) {  //根据id 打开搜索结果点tip
74             thiss.style.background = '#CAE1FF';
75             windowsArr[pointid].open(mapObj, marker[pointid]);
76 
77             //result中每个div触发的事件
78             document.getElementById("lngX").value = marker[pointid].getLng();
79             document.getElementById("latY").value = marker[pointid].getLat();
80 
81         }
82         function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
83             thiss.style.background = "";
84         }
85         //鼠标在地图上点击，获取经纬度坐标
86         function getLnglat(e) {
87             document.getElementById("lngX").value = e.lnglat.getLng();
88             document.getElementById("latY").value = e.lnglat.getLat();
89         }
90 
91         //关闭页面
92         function CloseWind() {
93             var lat = document.getElementById("lngX").value;
94             var lon = document.getElementById("latY").value;
95             opener.setValue(lat + "," + lon);
96             window.close();
97 
98         }

View Code

HTML

 1 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.2&key=XXXXXXX"></script>
 2     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 3         <tr>
 4             <td colspan="2" height="50">
 5                 <br>
 6                 高德地图：<input type="text" name="searchText">
 7                 <input type="button" value="查询" onclick="placeSearch()" /> 输入位置信息
 8                 <br><br>地图经纬度坐标： X：<input type="text" id="lngX" name="lngX" /> Y：<input type="text" id="latY" name="latY" />
 9                 <input type="button" name="btn_Close" id="btn_Close" value="确定，并关闭页面" onclick="CloseWind();" /> *选择正确地点之后，请点击该按钮
10             </td>
11         </tr>
12         <tr>
13             <td width="70%" height="500"> <div style="height:100%" id="iCenter"></div></td>
14             <td valign="top">
15                 <div class="demo_box">
16                     <div id="r_title"><b>关键字查询结果:</b></div>
17                     <div id="result"> </div>
18                 </div>
19                 <span class="STYLE1"></span>
20             </td>
21         </tr>
22     </table>