学习笔记--简单的天地图poi搜索 + jqpaginator分页插件

最新推荐文章于 2023-09-08 17:25:15 发布

weixin_34402090

最新推荐文章于 2023-09-08 17:25:15 发布

阅读量1.1k

点赞数

文章标签： python javascript json ViewUI

原文链接：https://juejin.im/post/5a4b49ca6fb9a045167d9016

版权

本文记录了使用天地图进行 poi 搜索的注意事项，包括通过 URL get 请求获取关键字搜索结果并在地图上展示。同时，文章介绍了如何结合 jqpaginator 插件实现分页，强调了分页参数的配置与事件处理。在地图图层操作和分页插件应用方面提供了实用的技巧。

摘要由CSDN通过智能技术生成

写在前面

记录天地图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(searchPoiD