通过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; 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>
地图查询
时间： 2024-10-07 11:52:17