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

简介: 原文:【百度地图API】多家地图API内存消耗对比测验(带源码)任务描述: 啊,美妙的春节结束了。酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为“世界文化遗产”的寺庙,叫做“双林寺”。
原文: 【百度地图API】多家地图API内存消耗对比测验(带源码)

任务描述:

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

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

如何实现:

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

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

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

图示:

img_b068a083e4258fc1166a10a92e01744e.jpgimg_c9747b7c263dc950ffed9d4166ecefbb.jpgimg_5fd0374e6e9fa83943bc1eaa6e2d0fa2.jpgimg_91ba0b4e3f2c31bd37b9d330e36fb884.jpg

img_7cafbb6b9a5af11b45dcd53f27e6bad4.jpg

说明:

在这里,我只列举了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:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
<! 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:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
<! 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&amp;v=2&amp;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:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
<! 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:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
<! 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:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
<! 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&#42;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 &copy; 酸奶小妹 </ 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 >

附图:

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

img_d316e24794aade2ec85cb7ff07b02330.jpg

相关实践学习
通过性能测试PTS对云服务器ECS进行规格选择与性能压测
本文为您介绍如何利用性能测试PTS对云服务器ECS进行规格选择与性能压测。
目录
相关文章
|
1月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
104 0
|
3月前
|
Linux
|
4月前
|
存储 Java
百度搜索:蓝易云【Java语言之float、double内存存储方式】
由于使用IEEE 754标准进行存储,float和double类型可以表示非常大或非常小的浮点数,并且具有一定的精度。然而,由于浮点数的特性,它们在进行精确计算时可能会存在舍入误差。在编写Java程序时,需要注意使
59 0
|
4月前
|
Java Shell 分布式数据库
【大数据技术Hadoop+Spark】HBase数据模型、Shell操作、Java API示例程序讲解(附源码 超详细)
【大数据技术Hadoop+Spark】HBase数据模型、Shell操作、Java API示例程序讲解(附源码 超详细)
84 0
|
4月前
|
分布式计算 Java 大数据
【大数据技术Hadoop+Spark】HDFS Shell常用命令及HDFS Java API详解及实战(超详细 附源码)
【大数据技术Hadoop+Spark】HDFS Shell常用命令及HDFS Java API详解及实战(超详细 附源码)
215 0
|
1月前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
41 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
2月前
|
Linux
百度搜索:蓝易云【深入解析Linux进程内存:VSS、RSS、PSS、USS及查看方式】
通过以上方法,你可以深入了解Linux进程的内存使用情况,包括VSS、RSS、PSS、USS等指标,帮助你进行性能优化和资源管理。
41 12
|
3月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
161 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
3月前
|
缓存 Linux
百度搜索:蓝易云【Linux系统中查看内存信息的方法有哪些?】
这些是在Linux系统中查看内存信息的常见方法。根据您的需求和具体环境,您可以选择适合您的方法来查看内存信息。
81 0
|
4月前
|
SQL 存储 DataWorks
DataWorks中API、desc、数据地图,这3个怎么对起来?
DataWorks中API、desc、数据地图,这3个怎么对起来?
40 0

热门文章

最新文章