您的位置: 首页  >  技术问答  >  Bing地图V8 JS API内存泄漏问题

Bing地图V8 JS API内存泄漏问题

分类: 技术问答 • 2022-09-03 17:18:03
问题描述：

概述：这个项目，我一直在努力从外部源接收消息，并根据收到的信息更新的兵地图。但是，当我让页面运行很长时间时，页面最终会耗尽所有内存并崩溃。Bing地图V8 JS API内存泄漏问题

具体内容：这个memory issue出现了，我从Google地图切换到Bing地图，无论我尝试过什么，我都无法解决它。我已经遍寻搜索，试图通过Bing地图最佳做法来解决此问题，或者至少找到导致此问题的原因，但我一直无法找到任何可以解决问题的方法。

我有一个detached DOMs量显著，并尝试更密切地分析他们使用谷歌Chrome浏览器的控制台，但一直未果。

尝试的修复：

  • 移动与所有的处理程序添加到地图初始化函数（如下显示）的事，但似乎并没有太多的改善。
  • 载入从地图初始化功能的任何Bing地图模块（显示如下）。这清理了很多代码，但似乎对内存使用量没有太大影响。
  • 同步加载地图。然而，这似乎打破了与网站上的Bing地图有关的一切。
  • 停止在接收到消息中的地图的处置。这有助于关键使用，但对内存使用没有帮助。

相关代码：

这里是地图的初始化函数（异步通过Bing地图运行调用的HTML）：

function initialize() { 
const CENTER = new Microsoft.Maps.Location(44.96375272262944, -93.2353971897461); 

// Assigns the zoom depending on whether the device is a mobile device or not 
if (isMobile()) { 
    zoom = 12; 
} else { 
    zoom = 13; 
} 

// Initialize the map 
map = new Microsoft.Maps.Map(document.getElementById('map-canvas'), { 
    credentials: API_KEY, 
    minZoom: zoom, 
    center: CENTER, 
    disableStreetside: true, 
    disableStreetsideAutoCoverage: true, 
    enableClickableLogo: false, 
    showLocateMeButton: false, 
    showMapTypeSelector: false 
}); 

bus1 = { 
    assignment: null, 
    destination: null, 
    distance: null, 
    eta: null, 
    location: null, 
    mph: null, 
    name: null, 
    pin: new Microsoft.Maps.Pushpin(map.getCenter(), { 
     icon: 'img/bus1.png', 
     anchor: new Microsoft.Maps.Point(14, 44), 
     visible: false, 
     text: "", 
     title: "" 
    }), 
    polylineRender: null, 
    time: null, 
    timeout: null, 
}; 
bus2 = { 
    assignment: null, 
    destination: null, 
    distance: null, 
    eta: null, 
    location: null, 
    mph: null, 
    name: null, 
    pin: new Microsoft.Maps.Pushpin(map.getCenter(), { 
     icon: 'img/bus2.png', 
     anchor: new Microsoft.Maps.Point(14, 44), 
     visible: false, 
     text: "", 
     title: "" 
    }), 
    polylineRender: null, 
    time: null, 
    timeout: null, 
}; 
bus3 = { 
    assignment: null, 
    destination: null, 
    distance: null, 
    eta: null, 
    location: null, 
    mph: null, 
    name: null, 
    pin: new Microsoft.Maps.Pushpin(map.getCenter(), { 
     icon: 'img/bus3.png', 
     anchor: new Microsoft.Maps.Point(14, 44), 
     visible: false, 
     text: "", 
     title: "" 
    }), 
    polylineRender: null, 
    time: null, 
    timeout: null, 
}; 

buses = [bus1, bus2, bus3]; 

// Add the traffic layer 
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function() { 
    trafficLayer = new Microsoft.Maps.Traffic.TrafficManager(map); 
}); 

// Add the directions manager 
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function() { 
    bus1.polylineRender = new Microsoft.Maps.Directions.DirectionsManager(map); 
    bus2.polylineRender = new Microsoft.Maps.Directions.DirectionsManager(map); 
    bus3.polylineRender = new Microsoft.Maps.Directions.DirectionsManager(map); 

    Microsoft.Maps.Events.addHandler(bus1.polylineRender, 'directionsError', function (e) { 
     console.log("Error: " + e.message + "\r\nResponse Code: " + e.responseCode); 
    }); 
    Microsoft.Maps.Events.addHandler(bus1.polylineRender, 'directionsUpdated', directionsUpdated); 

    Microsoft.Maps.Events.addHandler(bus2.polylineRender, 'directionsError', function (e) { 
     console.log("Error: " + e.message + "\r\nResponse Code: " + e.responseCode); 
    }); 
    Microsoft.Maps.Events.addHandler(bus2.polylineRender, 'directionsUpdated', directionsUpdated); 

    Microsoft.Maps.Events.addHandler(bus3.polylineRender, 'directionsError', function (e) { 
     console.log("Error: " + e.message + "\r\nResponse Code: " + e.responseCode); 
    }); 
    Microsoft.Maps.Events.addHandler(bus3.polylineRender, 'directionsUpdated', directionsUpdated); 
}); 

// Defines the polygons surrounding each campus 
polygonArrSTP = [ 
    new Microsoft.Maps.Location(44.94619673931851, -93.19240808486938), 
    new Microsoft.Maps.Location(44.941321471037966, -93.19249391555786), 
    new Microsoft.Maps.Location(44.94130628263941, -93.19764375686646), 
    new Microsoft.Maps.Location(44.93790398010943, -93.1975257396698), 
    new Microsoft.Maps.Location(44.937926764055824, -93.1924831867218), 
    new Microsoft.Maps.Location(44.94164802063501, -93.19241881370544), 
    new Microsoft.Maps.Location(44.94164802063501, -93.18739771842957), 
    new Microsoft.Maps.Location(44.94618914576464, -93.18735480308533), 
    new Microsoft.Maps.Location(44.94618914576464, -93.1924295425415), 
]; 
polygonArrMPLS = [ 
    new Microsoft.Maps.Location(44.97380025938377, -93.2795798778534), 
    new Microsoft.Maps.Location(44.97295018417148, -93.27883958816528), 
    new Microsoft.Maps.Location(44.97264658282772, -93.27782034873962), 
    new Microsoft.Maps.Location(44.973595331690625, -93.27698349952698), 
    new Microsoft.Maps.Location(44.9745744240603, -93.27614665031433), 
    new Microsoft.Maps.Location(44.97501463068608, -93.27712297439575), 
    new Microsoft.Maps.Location(44.9747205274961, -93.27738046646118), 
    new Microsoft.Maps.Location(44.974339139822895, -93.27832460403442), 
    new Microsoft.Maps.Location(44.97380025938377, -93.2795798778534) 
]; 

// Adds the campus polygons to the map 
polygonMPLS = new Microsoft.Maps.Polygon(polygonArrMPLS, { 
    fillColor: "rgba(255, 0, 0, 0.4)", 
    strokeColor: '#FF0000', 
    strokeThickness: 2 
}); 
polygonSTP = new Microsoft.Maps.Polygon(polygonArrSTP, { 
    fillColor: "rgba(255, 0, 0, 0.4)", 
    strokeColor: '#FF0000', 
    strokeThickness: 2 
}); 

// Assign the polygons to the Map 
map.entities.push(polygonMPLS); 
map.entities.push(polygonSTP); 

// Set the toggle for advanced mode 
advancedModeEnabled = false; 

generateBusStats(); 
subscribeToPubnub(); 

console.log("Initialization complete."); 
}

这里是在收到消息时运行的功能：

function redraw(payload) { 

// If the user is does not have the page active, the payload is refused 
if (!acceptingPayloads) { 
    return false; 
} 

let location = new Microsoft.Maps.Location(payload.message.lat, payload.message.lng); 
let name = payload.message.name; 
let dest = payload.message.dest; 
let mph = payload.message.mph; 

const STP = new Microsoft.Maps.Location(44.9416428, -93.1917952); 
const MPLS = new Microsoft.Maps.Location(44.9747502, -93.2774464); 

if (dest.toUpperCase() === "S") { 
    dest = {letter: "S", name: "St. Paul", coords: STP}; 
} else if (dest.toUpperCase() === "M") { 
    dest = {letter: "M", name: "Minneapolis", coords: MPLS}; 
} else { 
    dest = null; 
} 

console.log(name + ": " + location.latitude + ", " + location.longitude + " - " + dest.name + " - " + mph + " mph"); 

// Gets the bus object that the payload was sent from 
currentBus = getCurrentBus(name); 

// Removes the timeout for the current bus 
if (currentBus.timeout !== null) { 
    clearTimeout(currentBus.timeout); 
} 

currentBus.location = location; 
currentBus.destination = dest; 
currentBus.mph = mph; 
currentBus.time = Date.now(); 
currentBus.name = name; 

// Restart the timeout for the current bus 
beginTimeout(); 

// Calculate the distance between the current bus and its destination 
calcDistToDest(); 

$("." + currentBus.assignment + "-item").css('display', 'block') 
}

最后，这里是我用来获取点之间的距离的函数：

function calcDistToDest() { 

// Clear all information from the Directions Manager 
currentBus.polylineRender.clearAll(); 

// Set Route Mode to driving and the render options 
currentBus.polylineRender.setRequestOptions({ 
    routeMode: Microsoft.Maps.Directions.RouteMode.driving 
}); 
currentBus.polylineRender.setRenderOptions({ 
    autoUpdateMapView: false, 
    drivingPolylineOptions: { 
     visible: POLYLINE_VISIBILITY 
    }, 
    waypointPushpinOptions: { 
     visible: false 
    }, 
    firstWaypointPushpinOptions: { 
     anchor: currentBus.pin.getAnchor(), 
     icon: currentBus.pin.getIcon(), 
     title: currentBus.pin.getTitle(), 
     text: currentBus.pin.getText() 
    } 
}); 

// Sets the waypoint of the bus's current position and destination 
currentBus.polylineRender.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ 
    location: currentBus.location 
})); 
currentBus.polylineRender.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ 
    location: currentBus.destination.coords 
})); 

// Calculate the directions 
currentBus.polylineRender.calculateDirections(); 
}

基本上我寻找的是一个方法来找出是什么原因造成这个问题，如果问题很简单，我只是错过了一些显而易见的问题或者避免这个问题的最佳做法，这个问题的实际解决方案。

注：我的道歉张贴了这么多的代码。很难确定发布什么代码，因为我不知道代码的哪一部分导致了问题。让我知道这是否需要修改，或者是否需要其他信息，我会很乐意。我也从同一个文件中遗漏了很多看似不相关的JS代码，如果需要的话，我很乐意添加它。

+0

您使用的是Bing Maps V8的哪个分支？冻结的分支在一年内还没有更新，并且有很多已知的内存泄漏，其中很多已经在主要发布分支中修复。实验分支中还有更多的修复。您使用的是哪种浏览器，我相信您报告的问题是IE的一个已知问题。 – rbrundritt

+0

所以我一直在使用发布分支。在Chrome，Firefox，IE和Edge上，这个问题一直在以同样的速度发生。 –

+1

你可以尝试实验分支，看看问题是否仍然存在。如果解决方案已经解决，它可能会在下个星期在主要发布分支中发布，如果它能及时发布，或者接近9月底。 – rbrundritt

答

内存泄漏主要通过执行Bing Maps的实验分支来解决，如rbrundritt所示。

下面是如何使用的实验分支导入Bing地图的例子：

<script src='https://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=[Insert callback function]' async defer></script>

我后来能够切换回发布分支作为内存泄漏的修复被推到该分支。有关Bing Maps地图控制分支的更多信息可以在here找到。

相关推荐