学步园

前阵子做了个基于高德在线地图分析业务数据的web应用，但是在使用其API的过程中发现一个很不友好的问题，那就是它不支持对应的方法回调返回结果（当时不支持，2014-12-18号发布的1.3.5版本更新已经支持了，但仍然不够友好）。

这是怎么一回事呢？

高德地图API的架构是插件式的，每一个服务都是插件，比如AMap.PlaceSearch 地点搜索服务，回调函数是作为一个事件绑定在这个服务对象上的，至于search方法（根据关键字搜索）？不好意思，只提供一个参数key，也就是关键字，而city（所属城市）参数也是绑定在服务对象上的属性（初始化一个服务插件之后只能搜索同一个城市的地点）。

所以这就导致了一个问题：当你有100个地点名称准备进行循环搜索的时候，没法将返回的数据与你自己的数据一一对应起来，因为异步请求返回结果在时间上的不确定性。

我当时的解决方案就是：

//重写search方法 ，改为通过jsonp跨域直接调用高德的rest接口
		AMap.PlaceSearch.prototype.search = function(key,city,callback){
			$.ajax({
		        url:AMapAPI.url+"/v3/place/text",
		        type:"get",
		        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		        data:{
		        	keywords: key,
		        	key: AMapAPI.key,
		            s: AMapAPI.rsv,
		            city:city,
		            callback:'jsonp_837825_',
		            offset:50
		        },
		        dataType:"jsonp",
		        jsonp: 'callback',
		        success:function(data){
		        	var pois = data.pois,results = [];
		        	for(var i = 0;i<pois.length;i++){
		        		results.push({
		        			location:pois[i].location
		        		});
		        	}
		            if(callback)
		            	callback.apply(that,[results,city]);
		        } 
		    });
		};

然后使用如下：

AMapAPI.prototype.initPlaceSearch = function(){
	var that = this;
	this.mapObj.plugin(["AMap.PlaceSearch"], function() {       
		that.placeSearch  = new AMap.PlaceSearch({ //构造地点查询类
            pageSize:100,
            pageIndex:1,
            city:"010" //城市
        });
		//重写search方法 ，改为通过jsonp跨域直接调用高德的rest接口

		AMap.PlaceSearch.prototype.search = function(key,city,callback){
			$.ajax({
		        url:AMapAPI.url+"/v3/place/text",
		        type:"get",
		        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		        data:{
		        	keywords: key,
		        	key: AMapAPI.key,
		            s: AMapAPI.rsv,
		            city:city,
		            callback:'jsonp_837825_',
		            offset:50
		        },
		        dataType:"jsonp",
		        jsonp: 'callback',
		        success:function(data){
		        	var pois = data.pois,results = [];
		        	for(var i = 0;i<pois.length;i++){
		        		results.push({
		        			location:pois[i].location
		        		});
		        	}
		            if(callback)
		            	callback.apply(that,[results,city]);
		        } 
		    });
		};
    });
};

原理：利用浏览器的调试工具，捕获到该API所调用的Rest地址与参数结构，自己利用jquery的ajax方法的jsonp模式直接调用接口，传入所需参数（包括地名关键字、所属城市以及key和rsv等值），然后自己解析结果即可。这样一来就解决了两个问题：1，为每一个请求单独提供了回调方法；2，增加了city参数，在for循环里想查哪个城市的地点就查哪个城市的地点。但是这种方式也有弊端，万一高德哪天改动了Rest接口呢？

说回高德地图最新的1.3.5版本API，文章开头说它已经解决了回调函数的问题，但是这个city的问题仍然没有解决。希望高德地图的研发负责人能更多的注意一下使用体验，多考虑一下使用场景。
好了，该说的都说完啦，转载还请注明出处哦，谢谢各位！^_^~