3
我正在洪水淹沒網站的工作（USGS）和我有一個問題，釋放內存的PNG覆蓋時，選擇一個新的覆蓋。用戶可以選擇不同的疊加層，然後顯示不同的洪泛圖。問題是在選擇了大約4-5個不同的疊加層之後，內存填滿並停止顯示新選擇的疊加層。我們正在嘗試將我們的網站轉換爲Google Maps API v3。我們儘可能地減少了PNG文件的大小（它們平均大小爲150kb），而且我的想法已經不多了。每次選擇一個新的疊加層時，我都將映射設置爲null，並且還設置pngOverlay變量，但每次新選擇時，內存使用量都會增加大約0.40 GB。我也嘗試使用.htaccess文件來消除PNG的緩存，但這也不起作用。谷歌地圖v3 PNG覆蓋不釋放內存時發佈
我從網站中排除了所有jQuery和工作元素來排除其他所有內容。這個版本只是地圖和表格，沒有設計元素。仍然有同樣的問題。我已經在下面發佈了我的代碼的簡化版本，並且將其放在公共訪問的服務器上 - http://il.water.usgs.gov/ifhp/test/
任何提示/解決方法都將非常感謝！謝謝。
//index.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="STYLESHEET" type="text/css" href="stylesheets/3col.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<script type="text/javascript" src="scripts/mapv3_3.js"></script>
</head>
<body onload="initialize()">
<!--[if lte IE 6]><script src="ie6/warning.js"></script><script>window.onload=function(){e("ie6/")}</script><![endif]-->
<div>
<form name="myform">
<input onclick="loadPNG();" checked="true" type="radio" id="AreaButton" value="Area" name="OverlayType"/>Inundation area<br/>
<input onclick="loadPNG();" type="radio" id="DepthsButton" value="Depths" name="OverlayType"/>Inundation depth<br/><br/>
<select onchange="loadPNG();" type="select" id="GageHeightSelect" name="GageHeight" size="9">
<option selected="true" value="6"> 570.62 (6.0)</option>
<option value="7"> 571.62 (7.0)</option>
<option value="8"> 572.62 (8.0)</option>
<option value="9"> 573.62 (9.0)</option>
<option value="10"> 574.62 (10.0)</option>
<option value="11"> 575.62 (11.0)</option>
<option value="12"> 576.62 (12.0)</option>
<option value="13"> 577.62 (13.0)</option>
<option value="14"> 578.62 (14.0)</option>
</select>
</form>
</div>
<div id="map_canvas"></div>
</body>
//mapv3_3.js
var map;
var pngOverlay;
var pngName;
var bounds;
var bounds9;
var bounds10;
var mylatlng = new google.maps.LatLng(41.62, -88.20);
var myLatlng1 = new google.maps.LatLng(41.5222527,-88.1925623); //coordinates for marker 1
var myLatlng2 = new google.maps.LatLng(41.69,-88.16638889); //coordinates for marker 2
var curdate= new Date();
var curtime=curdate.getTime();
function initialize() {
//MAP
var mapOptions = {
center: mylatlng,
zoom: 11
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//MARKER IMAGES
var imageRefGage = new google.maps.MarkerImage('http://il.water.usgs.gov/ifhp/will/images/icon16.png',
null,
null,
new google.maps.Point(16, 16),
new google.maps.Size(32, 32));
var imageAuxGage = new google.maps.MarkerImage('http://il.water.usgs.gov/ifhp/will/images/icon16b.png',
null,
null,
new google.maps.Point(16, 16),
new google.maps.Size(32, 32));
var shad = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
//MARKERS
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title:"05540500",
icon: imageRefGage,
shadow: null
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title:"05540290",
icon: imageAuxGage,
shadow: null
});
//SET BOUNDS
// bounds for loading inundation layer png files (default, applies to all but 2 layers)
var swBound = new google.maps.LatLng(41.49262999190302, -88.24375135362827);
var neBound = new google.maps.LatLng(41.72723485385204, -88.13178850320171);
bounds = new google.maps.LatLngBounds(swBound, neBound);
// bounds for loading inundation layer new_surface9 png file
var swBound9 = new google.maps.LatLng(41.4970009997941, -88.23676753388432);
var neBound9 = new google.maps.LatLng(41.72228131551275, -88.14084620668086);
bounds9 = new google.maps.LatLngBounds(swBound9, neBound9);
// bounds for loading inundation layer new_surface10 png file
var swBound10 = new google.maps.LatLng(41.49696802795427, -88.2368497532207);
var neBound10 = new google.maps.LatLng(41.72231432415114, -88.140818671907);
bounds10 = new google.maps.LatLngBounds(swBound10, neBound10);
loadPNG();
};
function loadPNG() {
if (document.myform.GageHeight.value != "") {
if (getCheckedValue(document.myform.elements['OverlayType']) == "Depths") {
pngName = "new_depth" + document.myform.GageHeight.value + "-fs8";
} else {
pngName = "new_surface" + document.myform.GageHeight.value + "-fs8";
}
pngFile = "http://il.water.usgs.gov/kml_files/png/" + pngName + ".png";
if (pngOverlay!=null) {
pngOverlay.setMap(null);
pngOverlay = null;
}
if (pngName == "new_surface9-fs8") {
pngOverlay = new google.maps.GroundOverlay(pngFile, bounds9);
} else if (pngName == "new_surface10-fs8") {
pngOverlay = new google.maps.GroundOverlay(pngFile, bounds10);
} else {
pngOverlay = new google.maps.GroundOverlay(pngFile, bounds);
}
pngOverlay.setMap(map);
}
};
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
};
你說得對。我使用了[Ground Overlays示例]（https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple），並將其更改爲具有類似於此問題的行爲，並且沒有任何內存泄漏。立即出現使用'new_surface7-fs8.png'而不是谷歌原始圖像問題。 –
@ Dr.Molle，這似乎已經解決了我們的問題！非常感謝您花時間回覆。 – jalwes