首页 > 代码库 > 地图查询
地图查询
通过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) + "‘ onm ouseover=‘openMarkerTipById(" + (i + 1) 9 + ",this)‘ onclick=‘selectResult(" + i + ")‘ onm ouseout=‘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) + "‘ onm ouseover=‘openMarkerTipById1(" + i + ",this)‘ onm ouseout=‘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://www.mamicode.com/"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="http://www.mamicode.com/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="http://www.mamicode.com/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) + "‘ onm ouseover=‘openMarkerTipById(" + (i + 1) 97 + ",this)‘ onclick=‘selectResult(" + i + ")‘ onm ouseout=‘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 onm ouseout_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 =http://www.mamicode.com/ 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) + "‘ onm ouseover=‘openMarkerTipById1(" + i + ",this)‘ onm ouseout=‘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://www.mamicode.com/"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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。