解决高德地图在线API不支持对应的方法回调返回结果的问题

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

解决高德地图在线API不支持对应的方法回调返回结果的问题_第1张图片

这是怎么一回事呢?

高德地图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

然后使用如下:

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

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


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

你可能感兴趣的:(前端-javascript,前端-高德地图)