转载请注明出处哦!谢谢!
需求:由于项目需要,在取得两个城市名之后,需要计算出这两个城市之间的公里数,然后在项目中加以利用。
- 分析:其实我最一开始是考虑使用google地图API来实现的,但是老大指定了需要百度的API来实现。于是查阅了百度API的文档,根据 http://dev.baidu.com/wiki/static/index.htm 上的介绍(2011/9/20),目前百度API的接口版本有javascript版,移动版(包括iOS和Android),还有静态图版的,这里使用到的是javascript版的,使用javascript实现。
- 实现:由于自己对javascript半生不熟,略懂却还没深入(还在学习中),翻看了挺久的开发指南和类参考,才略做出一个实现。现将代码贴出供参考,大家有更好的实现,可以留言哦,谢啦!
下面是类定义(2011/9/23修改,加入回调函数,以处理返回值)
function CityUtil(){ if(typeof CityUtil._initialized == "undefined"){ CityUtil.prototype.getDistance=function(city1,city2,callback){ var myGeocoder = new BMap.Geocoder(); myGeocoder.getPoint(city1, function(point1){ myGeocoder.getPoint(city2, function(point2){ /* * 在页面增加临时div,用来解决map初始化的问题,因为要用到Map类的getDistance方法, * 而百度地图API的Map类的初始化必须要有一个容器 */ var bufDiv = document.createElement("div"); document.body.appendChild(bufDiv); bufDiv.setAttribute("id","mapContainer"); bufDiv.setAttribute("style","display:none"); var map=new BMap.Map('mapContainer'); map.centerAndZoom("北京",12); var distance=map.getDistance(point1,point2); var distanceBuf = (distance/1000).toFixed(2).split("."); var mileage = distanceBuf[0] +"."+distanceBuf[1]; alert(city1+"与"+city2+"距离为"+mileage+"公里"); /* * 删除临时div */ var a=document.getElementById("mapContainer"); a.parentNode.removeChild(a); //回调函数,返回原始的number类型的距离给回调函数处理 callback(distance); }, city2); }, city1); }; CityUtil._initialized = true; } }
调用的时候这样调用就可以了
function test(){ var city1="南京",city2="上海"; var cityUtil = new CityUtil(); //定义回调函数来处理数据 var fn_dataProcess=function(result){ alert(result); } cityUtil.getDistance(city1,city2,fn_dataProcess); }
- 待解决问题:
现在遇到的问题就是计算出来的值(mileage公里数),由于异步的原因 ,一直不能return出来,只好在嵌套的回调函数里面处理剩下的代码了。这样会带来挺多不便的。比如如果想要讲类CityUtil单独放在一个文件里面以便共享,但会由于异步,会遇到计算出来的公里数return不出来的问题,不知道该怎么处理同步这个问题。。。纠结