关于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) {
                 // 处理结果集
                 ......
             }
         }
     });
 }