地圖查詢

時間 2019-11-09

標籤地圖查詢简体版

原文原文鏈接

經過api實例瞭解一些接口功能。好比經常使用的動態查詢信息加載，地圖搜索查詢地址。自動查詢經過["AMap.Autocomplete"]插件實現，並監聽一個回調函數autocomplete_CallBack，查詢成功後，執行函數顯示查詢信息。javascript

 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：css

 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的數據格式爲：html

其中tips節點展開格式爲：adcode、district、namehtml5

函數調用tips數據tipArr = data.tips; tipArr[i].name等用於顯示自動查詢的結果。效果如圖，在查詢框中輸入地址後，自動加載一系列相關地址：java

讓地圖加載咱們要查詢的地理信息，經過["AMap.PlaceSearch"]插件實現，一樣須要一個回調函數，在完成查詢後執行圖層的清除，從新加載，新圖層和標記。綁定在按鈕點擊事件：jquery

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：web

添加新標記addmarker(i, poiArr[i]); 其中poiArr[i]爲pois裏的objectbootstrap

 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的格式爲:windows

效果如圖：api

所有代碼：

  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; width: 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。