Google、Aliyun和百度地图切换以及API的使用和（2011.01.12未发布）学习总结
一、写在前面
最近做了google地图、百度地图和阿里云地图三者的互相切换的应用，个人觉得有必要说一下，因此在此做个备忘提供一些肤浅的参考！以及在地图API的使用方面的一些我认为比较重要的提醒或者是误区。google地图v3出来以后就不需要钥匙(key)了，通过js的URL就可以直接拿来使用，无须再因为key 的缘故而浪费时间了。使用地图API最好的方法就是看它提供的示例和它提供的类以及类的属性和方法。简单明了随即看到效果，减少后顾之忧；从而信心百倍的沉浸在这种乐趣之中。当然，就不会因为自己的原因而影响整个团队的进度和个人的情绪，这一点对于开发人员而言尤为重要。
工作着并快乐着，工作就是一种享受，不知你同不同意；但这种感受我深有体会。复杂的问题简单化，这就是我们要做的事，能够让别人理解，提供一些参考资料也是可取的。这样在方便自己的同时也为别人提供了方便，所以要学好一门语言或是一种技术如果有大量的资料和API就会少走弯路，如果再有一些注意事项和提醒就更好了。程序是在不断地完善中变得健硕的，就如同一个男孩成长为一个男人一样，写程序就是在写自己的人生。
二、写此目的
1、近期学习的总结
2、简单介绍三种地图的创建和切换中需要注意的问题
3、本地探索的重点：google LocalSearch和百度BMap LocalSearch的结果面板的生成
三、学习总结
正如前面所说，写一些对大家有用的东西于己于人都是有好处的。我们在工作的时候很少去关心原理，以为只要实现出来就行了；于是，有些人就会说那个什么什么是多么多么的简单，了解了一些皮毛就沾沾自喜以为自己是天才，我觉得很可笑。了解皮毛就是肤浅，所以不要轻易地下结论，那样你会失去你应该掌握的东西。细节有时候会带来大麻烦，所以不求甚解有时候就为走上弯路埋下了伏笔。一旦出现问题，找半天也不是没有可能的。有时候你的灵机一动，你就会发现一个潜伏的漏洞和隐患，这就说明你的处理漏洞和隐患的机制已经启动，所以应该不断地提醒自己要注意随时可能发生或者爆发的‘瘟疫’。
当你有时间的时候，或是在适当的的时候，停下来捋一捋最近的生活和学习还是很有必要的，至少我这么认为。思想累的时候灵魂也变得焦躁不安。停下，问一问哪里是你要去的地方。人生不应该是盲目的，忙也可以忙里偷闲，关键在于方法。既然是IT人员就不仅仅是要关心技术的发展，同时也要提高自己的技术，促进个人本身的发展。整天泡在CSDN、你学到了什么，无非是一种眼界，那于个人的发展又有多大的决定性和实质性的作用呢，所以凡事过犹不及，就是浪费时间。往往精华的东西都在前面，面对浩如烟海的网络世界，博客论坛多了去了，说白了只需要关心自己感兴趣的东西就可以了，每天半小时已经足够了。当然，笑话幽默涉猎一些可以放松心情，适当放松一下也是为了更好地投入到学习和工作中去。知道自己想干什么，怎么去干，如何干好，这就已经足够。政治经济也可以关注一下，总不能视而不见吧，毕竟个人需要与外界同步和交流，了解世界的局势变化还是很有必要的，关心时事不一定是时政，政治你指手画脚也没人听你的。
当你的期望有扩大需求的欲望时，你会发现时间原来那么紧凑，对时间的渴望即使100年也不够。世界瞬息万变，计划跟不上变化；所以解决问题的关键在于你自己能不能应对这种变化。这就要你的信息储量大于垃圾储量了。发现问题、分析问题、并最终解决问题，没有态度，但至少要有精神，坚持到底功即使损兵折将也要完成。什么叫宁折不弯，那什么又是明知不可为而为之，的确值得思考。信息量就是财富，日积月累，当眼界和能力都有实质性的提升的时候，创造更多的财富就不是问题了。合理地安排时间，坚持一段时间就会看到实效，滴水石穿，时间积累的效果是惊人的。没有无回报的付出，关键在于你的行动是否有效。我们谈速度谈高效谈价值，一切都是因为付出与回报的失衡所致。我们一直寻找的平衡点就在那一端，即用时间和能力堆积起来的财富太少，以致原本的平衡向它的对立面倾斜。
时间不是个东西，而是空间，它给了你创造奇迹的可能，只要你愿意就可以做到。物尽其用，人尽其能，一切都有其归属，只是主宰它的不是时间而是自己或是器物的主人。没有十全十美，那就十全九美，找到最大的平衡点你就是赢家。善待时间，用它来积累财富，你可以变得很富有，至少富有精神。执着者的定力与定义将得到诠释，为了梦想而执着，追求永不止步，这就是我要找的平衡点。不艳羡他人的富有，不悲叹自己的贫穷，人生长乐，有无皆为浮云。
四、三种地图的创建
先决步骤：
1、创建容器：用来显示地图而创建的，即承载地图的地方
2、导入相应地图的API和所需的js库（存在于网络上，非本地文件）
3、熟悉API文档，以参看示例及源码为辅
关键步骤：
1、确认导入的API的版本以及是否是所需要的网络js库
2、容器的设置--是否允许自定义
3、考虑是否以后要扩展，代码该怎样写
进入主题：
公共参数：tag:<div> , id=container,map，mapType;
1、创建阿里云地图
（1）、导入API及js地图支持包
<script src="http://api.ditu.aliyun.com/map.js" type="text/javascript"></script>
（2）、实例化地图
function loadAliMap(){ map=new AliMap("mapDiv"); // 创建Map实例,这个比较特殊 map.centerAndZoom(new AliLatLng(39.915,116.404),12);//显示地图 map.addControl(new AliMapMouseWheelControl()); map.addControl(new AliMapLargeControl()); //为地图添加右键菜单功能支持 map.addControl(new AliMapContextMenuControl()); //添加几个右键菜单项 map.addContextMenuItem("center"); //添加右键菜单分割线 map.addContextMenuLine(); map.addContextMenuItem("zoomin"); map.addContextMenuItem("zoomout"); map.addContextMenuItem("zoomto"); //创建一个比例尺控件 controlrate=new AliMapScaleControl() //将比例尺控件添加到地图 map.addControl(controlrate); //本地探索 // search=new AliLocalSearch(); //AliEvent.addListener(search,"searchcomplete",onSearchComplete); // AliEvent.addListener(search,"searchexception",onSearchException); }
（3）、加载显示
window.onload=loadAliMap;
2、创建百度地图
（1）、导入API及js地图支持包
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
（2）、实例化地图
function loadBMap(){ var map = new BMap.Map("container"); // 创建Map实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。 map.enableScrollWheelZoom(); // 启用滚轮放大缩小。 map.enableKeyboard(); // 启用键盘操作。 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 }
（3）、加载显示
window.onload=loadBMap;
3、创建google地图
（1）、导入API及js地图支持包
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
（2）、实例化地图
function loadGMap() { var myLatlng = new google.maps.LatLng(31.797121, 116.644213); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("container"), myOptions); }
（3）、加载显示
window.onload=loadGMap;
注：具体的详见API，在此只做简单提示。
阿里云：http://ditu.aliyun.com/jsdoc/
百度：http://dev.baidu.com/wiki/static/index.htm
google:http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html
五、实现地图切换功能(在此只提思路不写代码)：
具体操作是将容器放入iframe里面，动态改变地图显示，将原有的容器清空再new一张新的map装入到容器里面即可。当然也可以直接覆盖原来的地图，基本上没有任何影响。因为map是全局的，所以不必担心地图的叠加。当你点击选择切换地图的时候，判断新地图的种类（mapType）重新加载到iframe的容器中就可以了。
（注：地图API,网络js库会不断地下载到本地，消耗内存很快，建议分开单独一个jsp完成一张相应的地图）
即创建点击的地图种类：
function createIWantedMap(){ if(mapType==0) window.onload=loadAliMap;//0代表阿里云地图 ......（以此类推） }
六、google localsearch
google.load('maps' , '2');
google.load('search' , '1');
var map;
var searcher;
function OnLoad() {
map = new google.maps.Map(mapContainer);
var searchControl = new google.search.SearchControl();
searcher = new google.search.LocalSearch(); // create the object
searcher.setCenterPoint(map); // bind the searcher to the map
var options = new google.search.SearcherOptions(); // create the object
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
searchControl.addSearcher(searcher , options);
searchControl.setSearchCompleteCallback(searcher , function() {
map.clearOverlays();
var results = searcher.results; // Grab the results array
// We loop through to get the points
for (var i = 0; i < results.length; i++) {
var result = results[i]; // Get the specific result
var markerLatLng = new google.maps.LatLng(parseFloat(result.lat),
parseFloat(result.lng));
var marker = new google.maps.Marker(markerLatLng); // Create the marker
// Bind information for the infoWindow aka the map marker popup
marker.bindInfoWindow(result.html.cloneNode(true));
result.marker = marker; // bind the marker to the result
map.addOverlay(marker); // add the marker to the map
}
// Store where the map should be centered
var center = searcher.resultViewport.center;
// Calculate what the zoom level should be
var ne = new google.maps.LatLng(searcher.resultViewport.ne.lat,
searcher.resultViewport.ne.lng);
var sw = new google.maps.LatLng(searcher.resultViewport.sw.lat,
searcher.resultViewport.sw.lng);
var bounds = new google.maps.LatLngBounds(sw, ne);
var zoom = map.getBoundsZoomLevel(bounds, new google.maps.Size(350, 350));
map.setCenter(new google.maps.LatLng(parseFloat(center.lat),
parseFloat(center.lng)),
zoom);
});
// Set the map's center point and finish!
map.setCenter(new google.maps.LatLng(37.443915 , -122.163610), 11);
searchControl.execute('pizza');
}
google.setOnLoadCallback(OnLoad);
七、BMap localsearch
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var options = { onSearchComplete: function(results){ if (local.getStatus() == BMAP_STATUS_SUCCESS){ // 判断状态是否正确 var s = []; for (var i = 0; i < results.getCurrentNumPois(); i ++){ s.push(results.getPoi(i).title + ", " + results.getPoi(i).address); } document.getElementById("log").innerHTML = s.join("<br>"); } } }; var local = new BMap.LocalSearch(map, options); var keyword=$('#search').val(); local.search(keyword);
八、注意事项
1、添加事件监听，注意你要监听的对象，监听的是什么事件
2、那些对象需要监听，地图上的移动，点击，双击.........
3、最好都使用特定地图的监听和方法，避免因地图切换导致不必要的麻烦和冲突
4、方法提取，公用的和私有的分清楚，地图不要混淆着用
5、不要轻易地删除一个对象，只有当你确定它不再需要存在时才清除它
