任务描述：
啊，美妙的春节结束了。酸奶小妹和妈妈的山西平遥之旅也宣告成功！距离平遥古城7km，有一个同样身为“世界文化遗产”的寺庙，叫做“双林寺”。双林寺的精致、纯木质结构、保存完好等特点，让我不由得为之一振。这让我想到了，万事万物都需要对比，“取其精华，去其糟粕”。
双林寺如是，API也如是。这不，上班第一天，我就迫不及待地做起了API性能测试。
如何实现：
使用不同家的API，分别以随机新增覆盖物为测试用例，观察内存消耗变化。
需要使用到不同家API来分别写测试用例。测试工具为IE6。
目前，有baidu、google、mapbar和mapabc。(2011-02-09 15:14更新，添加51地图)
图示：
说明：
在这里，我只列举了marker的代码，以作示范。
按这个原理，我还测试了标签、多边形、圆形、折线、信息窗口等覆盖物。
运行代码，请点击以下链接：
百度marker：
谷歌marker：
mapbar：
mapabc：
51ditu：
源代码：
百度marker：
代码 <! DOCTYPE HTML > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> < meta name ="viewport" content ="initial-scale=1.0, user-scalable=no" /> < title > Marker 性能 </ title > < style type ="text/css" > /* <![CDATA[ */ body { margin : 0 ; padding : 0 ; font-family : Times New Roman, serif } p { margin : 0 ; padding : 0 } #wrapper { width : 100% ; margin : auto ; text-align : left ; height : 100% } #map_container { height : 480px ; margin : 0 } #notes { position : absolute ; right : 10px ; width : 200px ; top : 10px } @media print { input{display : none } #notes { display : none } #map_container { margin : 10px ; border : none } } /* ]]> */ </ style > < script type ="text/javascript" src ="http://api.map.baidu.com/api?v=1.1&services=true" ></ script > </ head > < body > < div id ="map_container" ></ div > < div id ="test_container" > < input type ="button" onclick ="test_mem()" value ="mem_test" /> < input type ="button" onclick ="stop_mem()" value ="stop_test" /> </ div > </ div > </ body > < script type ="text/javascript" > if ( typeof console == " undefined " ){ window.console = { log: function (){ } }} // 创建地图对象并初始化 var mp = new BMap.Map( " map_container " ); var point = new BMap.Point( 116.404 , 39.915 );mp.centerAndZoom(point, 14 ); // 内存性能测试 var count = 0 ; function createInfo() { mp.clearOverlays(); if (count > 5000 ) { clearInterval(window._timer); alert( " 测试结束,一共运行 " + count + " 次。 " ); } createMarkers();} function createMarkers(){ var bounds = mp.getBounds(); var lngSpan = bounds.maxX - bounds.minX; var latSpan = bounds.maxY - bounds.minY; for ( var i = 0 ; i < 30 ; i ++ ) { count ++ ; var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15 ), bounds.minY + latSpan * (Math.random() * 0.7 + 0.15 )); var marker = new BMap.Marker(point); mp.addOverlay(marker); }} function test_mem() { window._timer = setInterval(createInfo, 10 );} function stop_mem() { clearInterval(window._timer); alert( " 运行了 " + count + " 次 " );} </ script > </ html >
谷歌marker：
代码 <! DOCTYPE HTML > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> < meta name ="viewport" content ="initial-scale=1.0, user-scalable=no" /> < title > Marker 性能 </ title > < style type ="text/css" > /* <![CDATA[ */ body { margin : 0 ; padding : 0 ; font-family : Times New Roman, serif } p { margin : 0 ; padding : 0 } #wrapper { width : 100% ; margin : auto ; text-align : left ; height : 100% } #map_container { height : 480px ; margin : 0 } #notes { position : absolute ; right : 10px ; width : 200px ; top : 10px } @media print { input{display : none } #notes { display : none } #map_container { margin : 10px ; border : none } } /* ]]> */ </ style > < script src ="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type ="text/javascript" ></ script > </ head > < body > < div id ="map_container" ></ div > < div id ="test_container" > < input type ="button" onclick ="test_mem()" value ="mem_test" /> < input type ="button" onclick ="stop_mem()" value ="stop_test" /> </ div > </ div > </ body > < script type ="text/javascript" > if ( typeof console == " undefined " ){ window.console = { log: function (){ } }} // 谷歌地图初始化 var map = new GMap2(document.getElementById( " map_container " )); map.setCenter( new GLatLng( 39.917 , 116.397 ), 14 ); // 内存性能测试 var count = 0 ; function createInfo() { map.clearOverlays(); if (count > 5000 ) { clearInterval(window._timer); alert( " 测试结束 " + count); } createMarkers();} function createMarkers(){ // 随机向地图添加 30 个标记 var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for ( var i = 0 ; i < 30 ; i ++ ) { count ++ ; var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay( new GMarker(latlng)); }} function test_mem() { window._timer = setInterval(createInfo, 10 );} function stop_mem() { clearInterval(window._timer); alert( " 计数器 " + count);} </ script > </ html >
mapbar：
代码 <! DOCTYPE HTML > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> < meta name ="viewport" content ="initial-scale=1.0, user-scalable=no" /> < title > Marker 性能 </ title > < style type ="text/css" > /* <![CDATA[ */ body { margin : 0 ; padding : 0 ; font-family : Times New Roman, serif } p { margin : 0 ; padding : 0 } #wrapper { width : 100% ; margin : auto ; text-align : left ; height : 100% } #map_container { height : 480px ; margin : 0 } #notes { position : absolute ; right : 10px ; width : 200px ; top : 10px } @media print { input{display : none } #notes { display : none } #map_container { margin : 10px ; border : none } } /* ]]> */ </ style > < script type ="text/javascript" src ="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT=" > </ script > </ head > < body > < div id ="map_container" ></ div > < div id ="test_container" > < input type ="button" onclick ="test_mem()" value ="mem_test" /> < input type ="button" onclick ="stop_mem()" value ="stop_test" /> </ div > </ div > </ body > < script type ="text/javascript" > if ( typeof console == " undefined " ){ window.console = { log: function (){ } }} // 地图初始化 maplet = new Maplet( " map_container " );maplet.centerAndZoom( new MPoint( 116.38672 , 39.90805 ), 8 );maplet.addControl( new MStandardControl()); // 内存性能测试 var count = 0 ; function createInfo() { maplet.clearOverlays(); if (count > 3000 ) { clearInterval(window._timer); alert( " 测试结束 " + count); } createMarkers();} function createMarkers(){ var lngSpan = 116.43683 - 116.29069 ; var latSpan = 39.98916 - 39.88337 ; for ( var i = 0 ; i < 30 ; i ++ ) { count ++ ; var point = new MPoint( 116.29069 + lngSpan * (Math.random() * 0.7 + 0.15 ), 39.88337 + latSpan * (Math.random() * 0.7 + 0.15 )); var marker = new MMarker( point, new MIcon( " http://union.mapbar.com/apidoc/images/tb1.gif " , 32 , 32 ) ); maplet.addOverlay(marker); }} function test_mem() { window._timer = setInterval(createInfo, 10 );} function stop_mem() { clearInterval(window._timer); alert( " 计数器 " + count);} </ script > </ html >
mapabc：
代码 <! DOCTYPE HTML > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> < meta name ="viewport" content ="initial-scale=1.0, user-scalable=no" /> < title > Marker 性能 </ title > < style type ="text/css" > /* <![CDATA[ */ body { margin : 0 ; padding : 0 ; font-family : Times New Roman, serif } p { margin : 0 ; padding : 0 } #wrapper { width : 100% ; margin : auto ; text-align : left ; height : 100% } #map_container { height : 480px ; margin : 0 } #notes { position : absolute ; right : 10px ; width : 200px ; top : 10px } @media print { input{display : none } #notes { display : none } #map_container { margin : 10px ; border : none ; width : 600px ; height : 500px ; overflow : hidden ; } /* ]]> */ </ style > < script type ="text/javascript" src ="http://app.mapabc.com/apis?&t=ajaxmap&v=2.1.2&key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3|29e8ed1f7f6a97d8e99fc568cea6a7dc0ccd920856e07c0718b9885faf7551a18141699c81f526d7" > </ script > </ head > < body > < div id ="map_container" ></ div > < div id ="test_container" > < input type ="button" onclick ="test_mem()" value ="mem_test" /> < input type ="button" onclick ="stop_mem()" value ="stop_test" /> </ div > </ div > </ body > < script type ="text/javascript" > if ( typeof console == " undefined " ){ window.console = { log: function (){ } }} var mapOptions = new MMapOptions(); // 构建地图辅助类 mapOptions.zoom = 12 ; // 要加载的地图的缩放级别 mapOptions.center = new MLngLat( 116.36890411376953 , 39.913423004886866 ); // 要加载的地图的中心点经纬度坐标 mapOptions.toolbar = DEFAULT; // 设置地图初始化工具条 mapObj = new MMap( " map_container " ,mapOptions); // 地图初始化 // 内存性能测试 var count = 0 ; function createInfo() { mapObj.removeAllOverlays(); if (count > 5000 ) { clearInterval(window._timer); alert( " 测试结束 " ); } createMarkers();} function createMarkers(){ var bounds = mapObj.getLngLatBounds(); myX = bounds.northEast.lngX - bounds.southWest.lngX; myY = bounds.northEast.latY - bounds.southWest.latY; for ( var i = 0 ; i < 30 ; i ++ ) { count ++ ; var a = bounds.southWest.lngX + myX * (Math.random() * 0.7 + 0.15 ); var b = bounds.southWest.latY + myY * (Math.random() * 0.7 + 0.15 ); var markerOption = new MMarkerOptions(); markerOption.imageUrl = " http://code.mapabc.com/images/lan_1.png " ; Mmarker = new MMarker( new MLngLat(a,b),markerOption); mapObj.addOverlay(Mmarker, true ); }} function test_mem() { window._timer = setInterval(createInfo, 10 );} function stop_mem() { clearInterval(window._timer); alert( " 计数器 " + count);} </ script > </ html >
51ditu:
代码 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> < title > 酸奶小妹——百度地图API学习 </ title > < meta http-equiv ="X-UA-Compatible" content ="IE=EmulateIE7" /> < link rel ="stylesheet" type ="text/css" href ="http://ui-love.com/baidumap/base.css" media ="screen" /> < script language ="javascript" src ="http://api.51ditu.com/js/maps.js " ></ script > </ head > < body > < div class ="wrapper" > < div class ="header" > < h1 > 地图覆盖物内存优化测试--51地图API </ h1 > < p >< span class ="f-r" > 2011-02-09 </ span > 描述: </ p > < p > 该测试为地图API的marker添加测试。请使用IE6浏览器，打开任务管理器，观察内存消耗变化。 < br /> 请点击地图下方的开始按钮，测试开始；点击暂停按钮，将观察到运行次数. < br /> 一共运行5000次。 </ p > </ div > < div class ="container clearfix" > < div class ="f-l" > < div id ="mapBox" class ="myMap" ></ div > < p > < input type ="button" onclick ="test_mem()" value ="开始" /> < input type ="button" onclick ="stop_mem()" value ="暂停" /> </ p > </ div > < div class ="f-r" > < img src ="51ditu.jpg" alt ="51ditu API覆盖物内存消耗" title ="百51ditu API覆盖物内存消耗" /> < p > 本次测试全部采用IE6浏览器； < br /> 本次测试的覆盖物全部采取随机方式创建； < br /> 依次连续不间断做以上测试，不穿插其他测试； < br /> 测试时间均为每1毫秒执行一次创建； < br /> 测试期间，不新建其他进程。 </ p > </ div > </ div > < div class ="info" > < p > 谷歌广告: </ p > < div style ="clear:both" > < script type ="text/javascript" > <!-- google_ad_client = " ca-pub-5845154460812025 " ; /* 横幅728*90 */ google_ad_slot = " 8606107205 " ; google_ad_width = 728 ; google_ad_height = 90 ; // --> </ script > < script type ="text/javascript" src ="http://pagead2.googlesyndication.com/pagead/show_ads.js" > </ script > </ div > </ div > < div class ="footer" > < span class ="f-r" > COPYRIGHT © 酸奶小妹 </ span > < span > 友情链接: < a target ="_blank" href ="http://openapi.baidu.com/map/index.html" > 百度地图API </ a > | < a target ="_blank" href ="http://tieba.baidu.com/f?kw=%B0%D9%B6%C8%B5%D8%CD%BCapi&fr=tb0_search&ie=utf-8" > 百度地图API贴吧 </ a > | < a target ="_blank" href ="http://map.baidu.com/" > 百度地图 </ a > | < a target ="_blank" href ="http://www.cnblogs.com/milkmap/" > 酸奶小妹 </ a > </ span > </ div > </ div > </ body > < script type ="text/javascript" > if ( typeof console == " undefined " ){ window.console = { log: function (){ } }} // 创建地图对象并初始化 var mp = new LTMaps( " mapBox " );mp.cityNameAndZoom( " beijing " , 5 ); // 内存性能测试 var count = 0 ; function createInfo() { mp.clearOverLays(); if (count > 5000 ) { clearInterval(window._timer); alert( " 测试结束,一共运行 " + count + " 次。 " ); } createMarkers();} function createMarkers(){ var bounds = new LTBounds( 11630969 , 3979945 , 11650969 , 3999945 ); var lngSpan = bounds.Xmax - bounds.Xmin; var latSpan = bounds.Ymax - bounds.Ymin; for ( var i = 0 ; i < 30 ; i ++ ) { count ++ ; var point = new LTPoint(bounds.Xmin + lngSpan * (Math.random() * 0.7 + 0.15 ), bounds.Ymin + latSpan * (Math.random() * 0.7 + 0.15 )); var marker = new LTMarker(point); mp.addOverLay(marker); }} function test_mem() { window._timer = setInterval(createInfo, 10 );} function stop_mem() { clearInterval(window._timer); alert( " 目前运行了 " + count + " 次 " );} </ script > </ html >
附图：
双林寺大雄宝殿一角，对比过多家寺庙，才能发现双林寺的与众不同。当之无愧的“世界文化遗产”！
