【百度地图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进行规格选择与性能压测。
目录
相关文章
|
2月前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
91 2
|
14天前
|
存储 人工智能 API
AgentScope:阿里开源多智能体低代码开发平台,支持一键导出源码、多种模型API和本地模型部署
AgentScope是阿里巴巴集团开源的多智能体开发平台,旨在帮助开发者轻松构建和部署多智能体应用。该平台提供分布式支持,内置多种模型API和本地模型部署选项,支持多模态数据处理。
132 4
AgentScope:阿里开源多智能体低代码开发平台,支持一键导出源码、多种模型API和本地模型部署
|
2月前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
2月前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
2月前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
3月前
|
存储 安全 Java
jdk21的外部函数和内存API(MemorySegment)(官方翻译)
本文介绍了JDK 21中引入的外部函数和内存API(MemorySegment),这些API使得Java程序能够更安全、高效地与JVM外部的代码和数据进行互操作,包括调用外部函数、访问外部内存,以及使用不同的Arena竞技场来分配和管理MemorySegment。
86 1
jdk21的外部函数和内存API(MemorySegment)(官方翻译)
|
3月前
|
存储 数据可视化 JavaScript
可视化集成API接口请求+变量绑定+源码输出
可视化集成API接口请求+变量绑定+源码输出
81 4
|
4月前
|
安全 Java API
【性能与安全的双重飞跃】JDK 22外部函数与内存API:JNI的继任者,引领Java新潮流!
【9月更文挑战第7天】JDK 22外部函数与内存API的发布,标志着Java在性能与安全性方面实现了双重飞跃。作为JNI的继任者,这一新特性不仅简化了Java与本地代码的交互过程,还提升了程序的性能和安全性。我们有理由相信,在外部函数与内存API的引领下,Java将开启一个全新的编程时代,为开发者们带来更加高效、更加安全的编程体验。让我们共同期待Java在未来的辉煌成就!
84 11
|
4月前
|
安全 Java API
【本地与Java无缝对接】JDK 22外部函数和内存API:JNI终结者,性能与安全双提升!
【9月更文挑战第6天】JDK 22的外部函数和内存API无疑是Java编程语言发展史上的一个重要里程碑。它不仅解决了JNI的诸多局限和挑战,还为Java与本地代码的互操作提供了更加高效、安全和简洁的解决方案。随着FFM API的逐渐成熟和完善,我们有理由相信,Java将在更多领域展现出其强大的生命力和竞争力。让我们共同期待Java编程新纪元的到来!
132 11
|
4月前
|
监控 Java 大数据
【Java内存管理新突破】JDK 22:细粒度内存管理API,精准控制每一块内存!
【9月更文挑战第9天】虽然目前JDK 22的确切内容尚未公布,但我们可以根据Java语言的发展趋势和社区的需求,预测细粒度内存管理API可能成为未来Java内存管理领域的新突破。这套API将为开发者提供前所未有的内存控制能力,助力Java应用在更多领域发挥更大作用。我们期待JDK 22的发布,期待Java语言在内存管理领域的持续创新和发展。