最近在做性能测试的时候发现BingMap内存泄露（memory leak）的问题，查找了一些国外的帖子，发现也有类似的问题，但是没有好的解决办法。
经过一番尝试，找到了一个折中的解决方案，分享一下。
先贴一下Testing Code吧：
<!DOCTYPE html>
<%--<meta http-equiv='x-ua-compatible' content='IE=7;IE=9' />--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="myMap" style="width:800px;height:600px;position:absolute">
</div>
<input id="btnAdd" type="button" style="position:absolute;top:700px;left:10px;" value="Add" onclick="addBatchPushpin();"/>
<input id="btnDelete" type="button" style="position:absolute;top:700px;left:110px;" value="Delete" onclick="deleteBatchPushpin();" />
<input id="btnClear" type="button" style="position:absolute;top:700px;left:210px;" value="Clear" onclick="clearPushpin();"/>
<input id="Button1" type="button" style="position:absolute;top:700px;left:310px;" value="Find" onclick="findPushpin();"/>
<div id="hidElement"></div>
</form>
</body>
</html>
<script type="text/javascript" >
var map = null;
var _layer = null;
var _bingMapKey = "ApirbCqPCAM1bVBVeh5CrrNm-7lzdCkbDT5OPkck8pXXeKWWGNUrIGsTqlkDHlu8";
$(document).ready(function ()
{
var mapOptions = {
credentials: _bingMapKey,
enableClickableLogo: false,
enableSearchLogo: false,
showMapTypeSelector: true,
showCopyright: false
}
map = new Microsoft.Maps.Map($("#myMap")[0], mapOptions);
var infoboxLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(infoboxLayer);
map.setView({ animate: true, zoom: 5, center: new Microsoft.Maps.Location(40, -71) });
_layer = new Microsoft.Maps.EntityCollection();
map.entities.push(_layer);
//var lat = 40.56090348161442;
//var lon = -74.345836486816438;
//addPushpin(lat,lon);
setInterval(addBatchPushpin, 500);
setInterval(deleteBatchPushpin, 1000);
})
function addBatchPushpin()
{
var lat = 40.56090348161442;
var lon = -74.345836486816438;
for (var i = 0; i < 20; i++)
{
var randomLatitude = Math.random() + lat;
var randomLongitude = Math.random() + lon;
addPushpin(randomLatitude, randomLongitude);
}
}
function deleteBatchPushpin()
{
var len = _layer.getLength();
for (var i = 0; i < len; i++)
{
_layer.removeAt(0);
$('#cfsNew').remove();
window.CollectGarbage();
}
}
function addPushpin(lat, lon)
{
var htmlTest = '<table id="cfsNew" cellpadding="0" cellspacing="0"><tr><td><div style="border: black 2px solid; padding-bottom: 0em; line-height: 12px; background-color: white; margin: 0em;padding-left: 0px; padding-right: 0px; font-family: Arial; color: black;font-size: 12px; font-weight: bold;padding-top: 0em;"><div style="white-space: nowrap;">{P2012-001093} </div><div style="font-weight: bold; font-size: 12px; font-family:Arial"><table style="font-size:inherit;" cellpadding="0" cellspacing="0"><tr><td style="width: 5px; height:5px;"><div style=" background-color: rgb(0,128,0); width: 5px;display: block; margin-bottom: 2px; height: 6px; overflow: hidden; margin-right: 1px"> </div></td><td style="color: rgb(0,128,0);font-size: 12px; font-family:Arial; font-weight:bold;">{297}</td></tr><tr><td style="width: 5px;"><div style=" background-color: rgb(0,128,0); width: 5px;display: block; margin-bottom: 2px; height: 6px; overflow: hidden; margin-right: 1px"></div></td><td style="color: rgb(0,128,0);font-size: 12px; font-family:Arial; font-weight:bold;">907</td></tr><tr><td style="width: 5px;"><div style=" background-color: rgb(255,0,0); width: 5px;display: block; margin-bottom: 4px; height: 6px; overflow: hidden; margin-right: 1px"></div></td><td style="color: rgb(0,128,0);font-size: 12px; font-family:Arial; font-weight:bold;">401</td></tr><tr><td style="width: 5px;"><div style=" background-color: rgb(0,0,220); width: 5px;display: block; margin-bottom: 4px; height: 6px; overflow: hidden; margin-right: 1px"></div></td><td style="color: rgb(0,128,0);font-size: 12px; font-family:Arial; font-weight:bold;">408</td></tr></table></div></div></td></tr><tr><td align="center"><div align="center"><img style="position:relative; width: 40px; height: 40px; left: 20px;top:-1px;" src="Images/ReOpened Box.png" /> <img style="position:relative; width: 35px; height: 35px; left: -21px; top: -1px;" src="Images/pin.png" /></div></td></tr></table>';
var loc = new Microsoft.Maps.Location(lat, lon);
var html = htmlTest;
var pushpinOptions = { htmlContent: html, zIndex: 100000, width: getWidth(html) };
var pushpin = new Microsoft.Maps.Pushpin(loc, pushpinOptions);
_layer.push(pushpin);
}
function clearPushpin()
{
_layer.clear();
window.CollectGarbage();
}
function findPushpin()
{
var test = $('#cfsNew').length;
alert(test);
}
function getWidth(html)
{
element = $("#hidElement");
element.html(html);
var height = element[0].scrollHeight;
var width = element.children().width();
return width;
}
</script>
分析一下具体的原因吧，就是往地图上增加pushpin的时候，实际上是增加了一个HTML元素，但是移除的时候只是调用_layre.remove(pushpin)或者_layer.removeAt(index)，这两个方法是一样的效果，只是从BingMap的EntityCollection集合中移除了Pushpin对象，但是Pushpin的HTML对象在内存中依然存在，所以频繁增加移除会导致内存不断的增长。
测试结果：
1. 将cfsNew的HTML元素直接放到页面上，然后每次通过取DOM元素的方式取去添加到地图上，内存增长的速度大概是每秒10M。
2. 将cfsNew的HTML写成一个var的字符串的形式赋给Pushpin的contentHTML上，内存增长的速度大概每秒1M。
3. 如果不用HTML格式的Pushpin，用默认的Pushpin的图标（水滴状），内存增加的频率为每秒0.1M。
4. 添加了$(‘#cfsNew‘).remove();方法之后，内存持续增加的情况消失了。
目前我只是通过删除是手动移除HTML对象的方式解决这个问题，不过由于每个图标的HTML是不一样的，还需要绑定特别的属性做这样的标记，给程序开发增加了很大的不方便，还是希望Microsoft能发现并解决这个问题。
时间： 2024-10-09 20:58:16