高德地图——搜索
来源:互联网 发布:怎么安装oracle数据库 编辑:程序博客网 时间:2024/06/10 07:20
通过api实例了解一些接口功能。比如常用的动态查询信息加载,地图搜索查询地址。自动查询通过[“AMap.Autocomplete”]插件实现,并监听一个回调函数autocomplete_CallBack,查询成功后,执行函数显示查询信息。
//输入提示 function autoSearch() { var keywords = document.getElementById("keyword").value; var auto; //加载输入提示插件 mapObj.plugin(["AMap.Autocomplete"], function() { var autoOptions = { city: "" //城市,默认全国 }; auto = new AMap.Autocomplete(autoOptions); //查询成功时返回查询结果 if ( keywords.length > 0) { AMap.event.addListener(auto,"complete",autocomplete_CallBack); auto.search(keywords); } else { document.getElementById("result1").style.display = "none"; } }); }
回调函数autocomplete_CallBack:
//输出输入提示结果的回调函数 function autocomplete_CallBack(data) { var resultStr = ""; var tipArr = []; tipArr = data.tips; if (tipArr.length>0) { for (var i = 0; i < tipArr.length; i++) { resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>"; } } else { resultStr = " π__π 亲,人家找不到结果!<br />要不试试:<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字"; } document.getElementById("result1").innerHTML = resultStr; document.getElementById("result1").style.display = "block"; }
回调函数中,data的数据格式为:
其中tips节点展开格式为:adcode、district、name
函数调用tips数据tipArr = data.tips; tipArr[i].name等用于显示自动查询的结果。效果如图,在查询框中输入地址后,自动加载一系列相关地址:
让地图加载我们要查询的地理信息,通过[“AMap.PlaceSearch”]插件实现,同样需要一个回调函数,在完成查询后执行图层的清除,重新加载,新图层和标记。绑定在按钮点击事件:
function search_place(){ var text = $('#keyword').val(); //根据选择的输入提示关键字查询 mapObj.plugin(["AMap.PlaceSearch"], function() { var msearch = new AMap.PlaceSearch(); //构造地点查询类 AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数 msearch.search(text); //关键字查询查询 });}
回调函数placeSearch_CallBack:
添加新标记addmarker(i, poiArr[i]); 其中poiArr[i]为pois里的object
//输出关键字查询结果的回调函数 function placeSearch_CallBack(data) { //清空地图上的InfoWindow和Marker windowsArr = []; marker = []; mapObj.clearMap(); var resultStr1 = ""; var poiArr = data.poiList.pois; var resultCount = poiArr.length; for (var i = 0; i < resultCount; i++) { 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>"; resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>"; addmarker(i, poiArr[i]); } mapObj.setFitView(); document.getElementById("result").innerHTML = resultStr1; document.getElementById("result").style.display = "block"; }
其中data的格式为:
效果如图:
0 0
- 高德地图——搜索
- 高德地图——搜索
- 高德地图JS API —— 多边形搜索
- 高德地图关键字搜索
- 高德地图关键字搜索
- 高德地图——地图缩放
- iOS开发——高德地图调研(路线规划,周边搜索,)
- 基于高德地图SDK进行搜索
- Android实现高德地图POI搜索
- 高德地图关键字搜索oc版
- 高德地图poi全国搜索
- 高德地图引用,搜索定位
- 调用高德地图的搜索功能
- 高德地图(基本地图+定位+周边搜索)第一版
- iOS开发——项目中的地图跳转(苹果地图,百度地图,高德地图)
- 高德地图——地图图层
- Android 高德地图——地图展示
- Android 高德地图——地图定位
- VS2013下静态链接库(lib)和动态链接库(dll)的生成与使用
- 心蓝12306订票助手-自己动手抢火车票
- Android中的引用类型(强引用,弱引用,软引用,虚引用)
- [kuangbin带你飞]专题四 最短路练习 -F
- NodeJS简要教程
- 高德地图——搜索
- 让京东的密码问题从此不再重现(NET篇)
- 响应式页面制作总结
- mac电脑如何抢火车票
- yii2图片上传
- spring 常用注解
- 深入理解 GRE tunnel
- linux下分割catalina.out文件,按天生成文件
- Uiautomator使用方法的简单介绍