地图查询

通过api实例了解一些接口功能。比如常用的动态查询信息加载，地图搜索查询地址。自动查询通过["AMap.Autocomplete"]插件实现，并监听一个回调函数autocomplete_CallBack，查询成功后，执行函数显示查询信息。

 1 //输入提示 
 2 function autoSearch() { 
 3     var keywords = document.getElementById("keyword").value; 
 4     var auto; 
 5     //加载输入提示插件 
 6     mapObj.plugin(["AMap.Autocomplete"], function() { 
 7         var autoOptions = { 
 8             city: "" //城市，默认全国 
 9         }; 
10         auto = new AMap.Autocomplete(autoOptions); 
11         //查询成功时返回查询结果 
12         if ( keywords.length > 0) { 
13             AMap.event.addListener(auto,"complete",autocomplete_CallBack); 
14             auto.search(keywords); 
15         } 
16         else { 
17             document.getElementById("result1").style.display = "none"; 
18         } 
19     }); 
20 }

回调函数autocomplete_CallBack：

 1 //输出输入提示结果的回调函数 
 2 function autocomplete_CallBack(data) { 
 3     var resultStr = ""; 
 4     var tipArr = []; 
 5     tipArr = data.tips; 
 6     if (tipArr.length>0) {                   
 7         for (var i = 0; i < tipArr.length; i++) { 
 8             resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) 
 9                         + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) 
10                         + ",this)' style="font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>"; 
11         } 
12     } 
13     else  { 
14         resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字"; 
15     } 
16       
17     document.getElementById("result1").innerHTML = resultStr; 
18     document.getElementById("result1").style.display = "block"; 
19 }

回调函数中，data的数据格式为：

其中tips节点展开格式为：adcode、district、name

函数调用tips数据tipArr = data.tips; tipArr[i].name等用于显示自动查询的结果。效果如图，在查询框中输入地址后，自动加载一系列相关地址：

让地图加载我们要查询的地理信息，通过["AMap.PlaceSearch"]插件实现，同样需要一个回调函数，在完成查询后执行图层的清除，重新加载，新图层和标记。绑定在按钮点击事件：

1 function search_place(){
2     var text = $('#keyword').val();
3      //根据选择的输入提示关键字查询 
4     mapObj.plugin(["AMap.PlaceSearch"], function() {         
5         var msearch = new AMap.PlaceSearch();  //构造地点查询类 
6         AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数 
7         msearch.search(text);  //关键字查询查询 
8     });
9 }

回调函数placeSearch_CallBack：

添加新标记addmarker(i, poiArr[i]); 其中poiArr[i]为pois里的object

 1 //输出关键字查询结果的回调函数 
 2 function placeSearch_CallBack(data) { 
 3     //清空地图上的InfoWindow和Marker 
 4     windowsArr = []; 
 5     marker     = []; 
 6     mapObj.clearMap(); 
 7     var resultStr1 = ""; 
 8     var poiArr = data.poiList.pois; 
 9     var resultCount = poiArr.length; 
10     for (var i = 0; i < resultCount; i++) { 
11         resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='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>"; 
12             resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>"; 
13             addmarker(i, poiArr[i]); 
14     } 
15     mapObj.setFitView(); 
16     document.getElementById("result").innerHTML = resultStr1; 
17     document.getElementById("result").style.display = "block"; 
18 }

其中data的格式为:

效果如图：

全部代码：

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <title>Bootstrap 101 Template</title>
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <!-- Bootstrap -->
  7     <link rel="stylesheet" href="/css/bootstrap.min.css">
  8     <link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />  
  9     <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=5c6f2fc9074238d31a5ec24d8c0146f2"></script> 
 10 
 11     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 12     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 13     <!--[if lt IE 9]>
 14         <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
 15         <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
 16     <![endif]-->
 17   </head>
 18   <body>
 19       <div class="container">
 20     <p class="text-muted">LBS</p>
 21   <div class="row">
 22     
 23     <div class="col-lg-6">
 24       <div class="input-group">
 25         <input type="text" id="keyword" class="form-control">
 26         <span class="input-group-btn">
 27           <button class="btn btn-info" type="button" onclick="search_place();">LBSearch!</button>
 28         </span>
 29       </div><!-- /input-group -->
 30       <div id="result1" name="result1" style="overflow: auto;  95%; border: 1px solid gray;display: none;"></div> 
 31     </div><!-- /.col-lg-6 -->
 32     </div>
 33     <div class="row">
 34       <div class="col-xs-12 col-sm-6 col-md-4 ">
 35         <p class="text-muted">查询结果:</p>
 36         <div id="result"></div> 
 37      </div>
 38       <div class="col-sm-6 col-md-8 ">
 39         <div id="iCenter" ></div>
 40     </div>
 41 </div>
 42   </div><!-- /.row -->
 43  
 44     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 45     <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
 46     <!-- Include all compiled plugins (below), or include individual files as needed -->
 47     <script src="/js/bootstrap.min.js"></script>
 48   </body>
 49 </html>
 50 <script>
 51 var mapObj; 
 52 mapInit();
 53 //地图加载 
 54 function mapInit() { 
 55     var opt = { 
 56         level: 13, //设置地图缩放级别   
 57         center: new AMap.LngLat(121.455214,31.248771) //设置地图中心点  
 58     } 
 59     mapObj = new AMap.Map("iCenter", opt); 
 60    //判断浏览器类型，加载函数
 61     if (navigator.userAgent.indexOf("MSIE") > 0) { 
 62         document.getElementById("keyword").onpropertychange = autoSearch; 
 63     } 
 64     else { 
 65         document.getElementById("keyword").oninput = autoSearch; 
 66     } 
 67 } 
 68 //输入提示 
 69 function autoSearch() { 
 70     var keywords = $("#keyword").val(); 
 71     var auto; 
 72     //加载输入提示插件 
 73     mapObj.plugin(["AMap.Autocomplete"], function() { 
 74         var autoOptions = { 
 75             city: "" //城市，默认全国 
 76         }; 
 77         auto = new AMap.Autocomplete(autoOptions); 
 78         //查询成功时返回查询结果 
 79         if ( keywords.length > 0) { 
 80             AMap.event.addListener(auto,"complete",autocomplete_CallBack); 
 81             auto.search(keywords); 
 82         } 
 83         else { 
 84             document.getElementById("result1").style.display = "none"; 
 85         } 
 86     }); 
 87 } 
 88 
 89 //输出输入提示结果的回调函数 
 90 function autocomplete_CallBack(data) { 
 91     var resultStr = ""; 
 92     var tipArr = []; 
 93     tipArr = data.tips; 
 94     if (tipArr.length>0) {                   
 95         for (var i = 0; i < tipArr.length; i++) { 
 96             resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) 
 97                         + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) 
 98                         + ",this)' style="font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>"; 
 99         } 
100     } 
101     else  { 
102         resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字"; 
103     } 
104       
105     document.getElementById("result1").innerHTML = resultStr; 
106     document.getElementById("result1").style.display = "block"; 
107 } 
108    
109 //输入提示框鼠标滑过时的样式 
110 function openMarkerTipById(pointid, thiss) {  //根据id打开搜索结果点tip   
111     thiss.style.background = '#CAE1FF'; 
112 } 
113    
114 //输入提示框鼠标移出时的样式 
115 function onmouseout_MarkerStyle(pointid, thiss) {  //鼠标移开后点样式恢复   
116     thiss.style.background = ""; 
117 } 
118    
119 //从输入提示框中选择关键字并查询 
120 function selectResult(index) { 
121     if (navigator.userAgent.indexOf("MSIE") > 0) { 
122         document.getElementById("keyword").onpropertychange = null; 
123         document.getElementById("keyword").onfocus = focus_callback; 
124     } 
125     //截取输入提示的关键字部分 
126     var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*</[^>].*?>/g,"");; 
127     document.getElementById("keyword").value = text; 
128     document.getElementById("result1").style.display = "none"; 
129     // //根据选择的输入提示关键字查询 
130     // mapObj.plugin(["AMap.PlaceSearch"], function() {         
131     //     var msearch = new AMap.PlaceSearch();  //构造地点查询类 
132     //     AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数 
133     //     msearch.search(text);  //关键字查询查询 
134     // });
135     
136 } 
137 
138 function search_place(){
139     var text = $('#keyword').val();
140      //根据选择的输入提示关键字查询 
141     mapObj.plugin(["AMap.PlaceSearch"], function() {         
142         var msearch = new AMap.PlaceSearch();  //构造地点查询类 
143         AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数 
144         msearch.search(text);  //关键字查询查询 
145     });
146 }
147    
148 //定位选择输入提示关键字 
149 function focus_callback() { 
150     if (navigator.userAgent.indexOf("MSIE") > 0) { 
151         document.getElementById("keyword").onpropertychange = autoSearch; 
152    } 
153 } 
154    
155 //输出关键字查询结果的回调函数 
156 function placeSearch_CallBack(data) { 
157     //清空地图上的InfoWindow和Marker 
158     windowsArr = []; 
159     marker     = []; 
160     mapObj.clearMap(); 
161     var resultStr1 = ""; 
162     var poiArr = data.poiList.pois; 
163     var resultCount = poiArr.length; 
164     for (var i = 0; i < resultCount; i++) { 
165         resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='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>"; 
166             resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>"; 
167             addmarker(i, poiArr[i]); 
168     } 
169     mapObj.setFitView(); 
170     document.getElementById("result").innerHTML = resultStr1; 
171     document.getElementById("result").style.display = "block"; 
172 } 
173    
174 //鼠标滑过查询结果改变背景样式，根据id打开信息窗体 
175 function openMarkerTipById1(pointid, thiss) { 
176     thiss.style.background = '#CAE1FF'; 
177     windowsArr[pointid].open(mapObj, marker[pointid]); 
178 } 
179    
180 //添加查询结果的marker&infowindow     
181 function addmarker(i, d) { 
182     var lngX = d.location.getLng(); 
183     var latY = d.location.getLat(); 
184     var markerOption = { 
185         map:mapObj, 
186         icon:"http://webapi.amap.com/images/" + (i + 1) + ".png", 
187         position:new AMap.LngLat(lngX, latY) 
188     }; 
189     var mar = new AMap.Marker(markerOption);           
190     marker.push(new AMap.LngLat(lngX, latY)); 
191    
192     var infoWindow = new AMap.InfoWindow({ 
193         content:"<h3><font color="#00a6ac">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel), 
194         size:new AMap.Size(300, 0),  
195         autoMove:true,   
196         offset:new AMap.Pixel(0,-30) 
197     }); 
198     windowsArr.push(infoWindow);  
199     var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());}; 
200     AMap.event.addListener(mar, "click", aa); 
201 } 
202    
203 //infowindow显示内容 
204 function TipContents(type, address, tel) {  //窗体内容 
205     if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") { 
206         type = "暂无"; 
207     } 
208     if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") { 
209         address = "暂无"; 
210     } 
211     if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") { 
212         tel = "暂无"; 
213     } 
214     var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type; 
215     return str; 
216 }    
217 
218 </script>

View Code