【百度地图API】多家地图API内存消耗对比测验（带源码）-阿里云开发者社区

任务描述：

啊，美妙的春节结束了。酸奶小妹和妈妈的山西平遥之旅也宣告成功！距离平遥古城7km，有一个同样身为“世界文化遗产”的寺庙，叫做“双林寺”。双林寺的精致、纯木质结构、保存完好等特点，让我不由得为之一振。这让我想到了，万事万物都需要对比，“取其精华，去其糟粕”。

双林寺如是，API也如是。这不，上班第一天，我就迫不及待地做起了API性能测试。

如何实现：

使用不同家的API，分别以随机新增覆盖物为测试用例，观察内存消耗变化。

需要使用到不同家API来分别写测试用例。测试工具为IE6。

目前，有baidu、google、mapbar和mapabc。(2011-02-09 15:14更新，添加51地图)

图示：

说明：

在这里，我只列举了marker的代码，以作示范。

按这个原理，我还测试了标签、多边形、圆形、折线、信息窗口等覆盖物。

运行代码，请点击以下链接：

百度marker：http://ui-love.com/baidumap/apitest/marker-baidu.htm

谷歌marker：http://ui-love.com/baidumap/apitest/marker-google.htm

mapbar：http://ui-love.com/baidumap/apitest/marker-mapbar.htm

mapabc：http://ui-love.com/baidumap/apitest/marker-mapabc.htm

51ditu：http://ui-love.com/baidumap/apitest/marker-51ditu.htm

源代码：

百度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" > 
</ 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 >

附图：

双林寺大雄宝殿一角，对比过多家寺庙，才能发现双林寺的与众不同。当之无愧的“世界文化遗产”！