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

本文涉及的产品
性能测试 PTS,5000VUM额度
简介: 原文:【百度地图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进行规格选择与性能压测。
目录
相关文章
|
15天前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
45 2
|
10天前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
19天前
|
开发框架 监控 .NET
【Azure App Service】部署在App Service上的.NET应用内存消耗不能超过2GB的情况分析
x64 dotnet runtime is not installed on the app service by default. Since we had the app service running in x64, it was proxying the request to a 32 bit dotnet process which was throwing an OutOfMemoryException with requests >100MB. It worked on the IaaS servers because we had the x64 runtime install
|
3月前
|
XML IDE 前端开发
IDEA忽略node_modules减少内存消耗,提升索引速度
在后端开发中,IDEA 在运行前端代码时,频繁扫描 `node_modules` 文件夹会导致高内存消耗和慢索引速度,甚至可能会导致软件卡死。为了改善这一问题,可以按照以下步骤将 `node_modules` 文件夹设为忽略:通过状态菜单右键排除该文件夹、在设置选项中将其加入忽略列表,并且手动修改项目的 `.iml` 文件以添加排除配置。这些操作可以有效提高IDE的运行性能、减少内存占用并简化项目结构,但需要注意的是,排除后将无法对该文件夹进行索引,操作文件时需谨慎。
124 4
IDEA忽略node_modules减少内存消耗,提升索引速度
|
2月前
|
存储 数据可视化 JavaScript
可视化集成API接口请求+变量绑定+源码输出
可视化集成API接口请求+变量绑定+源码输出
54 4
|
2月前
|
JavaScript 前端开发 安全
如何避免闭包带来的内存消耗呢
【10月更文挑战第12天】如何避免闭包带来的内存消耗呢
33 0
|
4月前
|
存储 Linux API
Linux源码阅读笔记08-进程调度API系统调用案例分析
Linux源码阅读笔记08-进程调度API系统调用案例分析
|
4月前
|
Linux API
Linux源码阅读笔记07-进程管理4大常用API函数
Linux源码阅读笔记07-进程管理4大常用API函数
|
4月前
|
JSON API 网络架构
Django 后端架构开发:DRF 高可用API设计与核心源码剖析
Django 后端架构开发:DRF 高可用API设计与核心源码剖析
78 0
|
4月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
72 0