【百度地图API】多家地图API内存消耗对比测验（带源码）

原文:【百度地图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：

代码

;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}
}
/*]]>*/);

// 内存性能测试
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：

代码

;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}
}
/*]]>*/);
// 内存性能测试
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：

代码

;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}
}
/*]]>*/);
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：

代码

;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;}
/*]]>*/;//要加载的地图的缩放级别
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:

代码

";
google_ad_width = 728;
google_ad_height = 90;
//-->
);

// 内存性能测试
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>

附图：

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