关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索

1.ArcGis for javascript整合百度地图搜索

1.1.首先引入百度地图的api

<!-- 引入百度地图API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=********"></script>

1.2.初始化百度地图搜索相关的实例

function initBDMAP() {
    bdMap = new BMap.Map('myMap');
    lon = 120.00000000;　　// 经度
    lat = 30.00000000;　　 // 纬度
    bdMap.centerAndZoom(new BMap.Point(lon, lat), 11); // 根据经纬度实例化百度地图, 在进行搜索时, 会默认搜索经纬度所在的城市
    const options = {
      onSearchComplete(results) {
        if (bdMapLocal.getStatus() === BMAP_STATUS_SUCCESS) {
            // 运行到这里说明搜索成功, 搜索结果在results对象里面, 处理结果集
            ......
        }
      },
    };
    bdMapLocal = new BMap.LocalSearch(tdtMap, options); // 初始化百度地图搜索API, 将百度地图实例<bdMap>和回调函数<options>绑定到搜索API
}

1.3.调用搜索API进行搜索

bdMapLocal.search(param); // 当调用搜索API的search方法时, 会自动进行搜索, 并且自动进入回调函数

2.ArcGis for javascript整合天地图搜索

2.1.引入天地图API

<!-- 引入天地图提供地名搜索服务 -->
<script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>

2.2.初始化天地图的实例

function initTDTMAP() {
    tdtMap = new T.Map('tdtMap');
    // 设置显示地图的中心点和级别
    lon = 120.00000000;
    lat = 30.00000000;
    tdtMap.centerAndZoom(new T.LngLat(lon, lat), 12);
    const tdtConfig = {
        pageCapacity: 50,                         // 一次最多能查询多少条数据
        onSearchComplete: TdtLocalSearchResult,   // 接收数据的回调函数
    };
    // 创建搜索对象
    TdtLocalSearch = new T.LocalSearch(tdtMap, tdtConfig);
}

2.3.创建回调函数

function TdtLocalSearchResult(result) {
    // 根据返回类型解析搜索结果
    switch (parseInt(result.getResultType(), 10)) {
        case 1:
            // 解析点数据结果
            parsingSearchResults(result.getPois());
            break;
        case 2:
            // 解析其他点数结果
            ......
            break;
        ......
        default:
            console.log('天地图搜索路名无结果');
    }
}

2.4.处理结果集

function parsingSearchResults(tdtobj) {
    if (tdtobj) {
        // 处理结果集
        for (let i = 0; i < tdtobj.length; i += 1) {
            ......
        }
    }
}

3.ArcGis for javascript整合高德地图搜索

3.1.引入高德地图API

<!-- 引入高德地图API -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=1f675cd5121e2db5ab8bc326d3913373"></script>

3.2.初始化高德地图

function initGDMAP() {
    gdMap = new AMap.Map('myMap', {
        resizeEnable: true,
    });
}

3.3.创建搜索的方法以及函数的回调

function gdMapSearchPaging(roadPage, roadSize, param) {
    AMap.service(['AMap.PlaceSearch'], () => {
        placeSearch = new AMap.PlaceSearch({ // 构造地点查询类
            pageSize: roadSize,              // 分页查询的每页显示记录数
            pageIndex: roadPage,             // 分页查询的页码参数
            city: '0571',                    // 城市编码<高德地图的搜索是根据城市编码进行搜索>
            map: gdMap,
        });
    });
    placeSearch.search(param, (status, result) => {
        if (roadData.length > 0) {
            for (let i = 0; i < 10; i += 1) {
                // 处理结果集
                ......
            }
        }
    });
}