本文记录了使用天地图进行 poi 搜索的注意事项，包括通过 URL get 请求获取关键字搜索结果并在地图上展示。同时，文章介绍了如何结合 jqpaginator 插件实现分页，强调了分页参数的配置与事件处理。在地图图层操作和分页插件应用方面提供了实用的技巧。
写在前面
记录天地图poi搜索使用过程中需要注意的几处事项及其相应的解决过程。poi搜索结果的分页使用了jqpaginator插件（分页插件给出的是菜鸟教程链接，其中对插件的使用教程比主页链接中的详细）。
天地图poi搜索
本次项目是在esri地图的基础上，因此通过url的get请求方式，获取关键字搜索结果，并在地图新建的图层上符号化搜索结果。
- 创建一个点图层
// 搜索结果图层
layerSearchResult = new esri.layers.GraphicsLayer({ id: "searchResultLayer" });
map.addLayer(layerSearchResult);
// ...绑定一些监听事件
复制代码如果需要监听图层内的一些操作，需要在图层实例化之后，立即进行监听事件的绑定
- 获取天地图poi搜索结果
javascript:
/**
* 获取天地图POI
* @param {*} keyWord 搜索关键字
* @param {*} mapBound 查询的地图范围("xmin,ymin,xmax,ymax")
* @param {*} start 返回结果起始位（用于分页和缓存）默认0
*/
function getTdtPoi(keyWord, mapBound, start) {
// 搜索结果图层清空操作
if(layerSearchResult){
layerSearchResult.clear();
layerSearchResult.show();
}
var searchPoiData = null;
var postStr = {
"keyWord" : keyWord,
"level" : map.getZoom(), // 获取地图当前缩放等级
"mapBound" : mapBound,
"queryType" : "1", // 搜索类型，1：普通搜索
"count" : "10",
"start" : start
};
var settingsProject = {
url: "http://www.tianditu.com/query.shtml",
type: "GET",
async: false,
data: $.toJSON(postStr) + "&type=query"
};
$.ajax(settingsProject).fail(function(data) {
}).done(function(data) {
searchPoiData = JSON.parse(data);
// ... 搜索结果展示div显示及清空操作
if(searchPoiData.resultType == 2) {
// ... 搜索结果展示div显示及清空操作
// 统计类型
// 动态生成 搜索结果展示div中的相关内容
for (var j = 0; j < searchPoiData.prompt.length; j++) {
if(searchPoiData.prompt[j].type == 4){
$("#static_panel .promt .region").html(searchPoiData.prompt[j].admins[0].name);
}
}
var searchPriorityCity = searchPoiData.statistics.priorityCitys;
var list="";
for (var i = 0; i < searchPriorityCity.length; i++) {
var name = searchPriorityCity[i].name;
var count = searchPriorityCity[i].count;
var lon = searchPriorityCity[i].lon;
var lat = searchPriorityCity[i].lat;
list += "<li class='media' onclick=\"showPoiResult("+lon+","+lat+")\"><a href='#'>" + name + "<span>(" + count + ")</span></a></li>";
}
document.getElementById('searchResult').innerHTML = list;
return;
}
else if(searchPoiData.resultType == 1) {
// ... 搜索结果展示div显示及清空操作
// 普通poi类型
// 动态生成 搜索结果展示div中的相关内容
for (var j = 0; j < searchPoiData.prompt.length; j++) {
if(searchPoiData.prompt[j].type == 4){
$("#poi_panel .promt .region").html(searchPoiData.prompt[j].admins[0].name);
}
}
$("#poi_panel .promt .count").html(searchPoiData.count);
var list="";
for (var i = 0; i < searchPoiData.pois.length; i++) {
var lonLanArr = searchPoiData.pois[i].lonlat.split(" ");
var searchResult = new esri.geometry.Point(lonLanArr[0], lonLanArr[1]);
var name = searchPoiData.pois[i].name;
var address = searchPoiData.pois[i].address;
list +="<li class='media' onclick=\"showSelectPoiOnMap("+lonLanArr[0]+","+lonLanArr[1]+")\"> <a class='pull-left' href='#'>"
+"<img class='media-object locationIcon' src=\"./images/symbolUnclick.png\" alt='定位图标'></a>"
+"<div class='media-body'><h4 class='media-heading compayName'>"+name+"</h4>"
+"<p class='companyAddress'>"+address+"</p></div></li>";
// 搜索poi结果在图层中符号化
symbolUnclick = new esri.symbol.PictureMarkerSymbol('./images/symbolUnclick.png', 16, 27);
searchGraphic = new esri.Graphic(searchResult);
searchGraphic.setSymbol(symbolUnclick);
searchGraphic.setAttributes({
name : searchPoiData.pois[i].name,
telephone : searchPoiData.pois[i].phone,
address : searchPoiData.pois[i].address
});
// 信息框 ---- 当graphic点击时，自动触发map.showInfoWindow()
poiInfoTemplate = new esri.InfoTemplate();
poiInfoTemplate.setTitle("${name}");
poiInfoTemplate.setContent("<b>电话: </b>${telephone}<br/>"
+ "<b>地址: </b>${address}<br/>");
searchGraphic.setInfoTemplate(poiInfoTemplate);
// 搜索结果显示图层中添加显示poi搜索结果
if(layerSearchResult){
layerSearchResult.add(searchGraphic);
}
searchPoiData.pois[i].graphic = searchGraphic;
}
// 搜索结果显示div
document.getElementById('searchPoiResult').innerHTML = list;
// 初始化poi结果分页
initPoiPagenation(Number(searchPoiData.count));
} else if(searchPoiData.resultType == 3) {
// 行政区类型
// ... 搜索结果展示div显示及清空操作
// 地图重新跳转操作
var lonLanArr = searchPoiData.area.lonlat.split(",");
map.centerAndZoom([Number(lonLanArr[0]), Number(lonLanArr[1])], Number(searchPoiData.area.level));
}
});
}
html:
<!-- 搜索结果列表 -->
<div class="searchResultDiv">
<div class="title">搜索结果</div>
<!-- 城市定位部分 -->
<div id="region_panel">
<div class="region_content">
<i class="fa fa-check-circle" aria-hidden="true"></i>
<span class="promt">已切换到</span>
<span class="regionName"></span>
</div>
</div>
<!-- 地区分类部分 -->
<div id="static_panel">
<div class="promt">
<span class="static">主要在<span class="region"></span>以下城市有结果，请选择</span>
</div>
<div class="priority">
<ul class="result_ul media-list" id="searchResult">
</ul>
</div>
</div>
<!-- poi查询结果部分 -->
<div id="poi_panel">
<div class="promt">
<span class="static">在<span class="region"></span>共找到<span class="count"></span>条结果</span>
</div>
<ul class="result_ul media-list" id="searchPoiResult">
</ul>
<!-- poi分页显示 -->
<div id="poiPagination">
</div>
</div>
</div>
css: 部分
.searchResultDiv{
left:calc(100% - 730px);
}
复制代码1.注意start参数，定义poi搜索返回结果的起始位置，在分页的时候需与相应的页码对应
2.注意resultType的值，不同的值代表返回数据的不同类型，需进行相应的操作
3.在css中使用calc()，动态获得数值
jqpaginator插件的使用
- js外部引用
<script src="./js/jqpaginator.min.js"></script>
复制代码- 初始化分页
/**
* 初始化poi分页
* @param {*} total 分页的总条目数
*/
function initPoiPagenation(total) {
$('#poiPagination').jqPaginator({
totalCounts: total,
pageSize: 10,
visiblePages: 3,
currentPage: 1,
first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (num, type) {
// 通过判断type分为两种情况下操作：init--初始化时，change--切换页码时
if(type == "change") {
var keyWord = $.trim($("#toolbarSearch_input").val());
var mapBound = map.extent.xmin + "," + map.extent.ymin + "," + map.extent.xmax + "," + map.extent.ymax;
getTdtPoi(keyWord, mapBound, 10*(num - 1));
}
}
});
}
复制代码1.totalCounts和pageSize需要联合使用
2.onPageChange有两种返回类型：init和change，需判断后使用，不判断会造成代码死循环
3.onPageChange的num 和 getTdtPoi的start
扫一扫
3202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
