Javascript 谷歌地图-调整事件大小,显示div后不填充div
我有一个单页应用程序,使用reactjs和ReactRouter。我开发了一个地图组件,当然,如果我尝试在组件挂载时清理地图,并在组件挂载时重建地图,谷歌地图会在屏幕之间出现内存泄漏。所以我尝试了这种方法: 重新使用map实例和节点,并结合过度的清理措施,可以很好地解决问题并稳定问题。为了清理,我Javascript 谷歌地图-调整事件大小,显示div后不填充div,javascript,google-maps,google-maps-api-3,reactjs,react-router,Javascript,Google Maps,Google Maps Api 3,Reactjs,React Router,我有一个单页应用程序,使用reactjs和ReactRouter。我开发了一个地图组件,当然,如果我尝试在组件挂载时清理地图,并在组件挂载时重建地图,谷歌地图会在屏幕之间出现内存泄漏。所以我尝试了这种方法: 重新使用map实例和节点,并结合过度的清理措施,可以很好地解决问题并稳定问题。为了清理,我 对每个标记、地图、窗口和文档调用clearInstanceListeners 将任何标记上的映射设置为空 删除组件上的this.map,然后将其设置为null 删除此标记,然后将其设置为空数组
- 对每个标记、地图、窗口和文档调用clearInstanceListeners
- 将任何标记上的映射设置为空
- 删除组件上的this.map,然后将其设置为null
- 删除此标记,然后将其设置为空数组
sizeMapToContainer: function () {
google.maps.event.trigger(this.map, 'resize');
if (this.props.fitBounds) {
this.zoomInOnMarkers();
} else {
this.map.setCenter(new google.maps.LatLng(this.props.center[1], this.props.center[0]));
this.map.setZoom(this.props.zoom);
}
},
和窗口大小调整功能:
window.onresize = function onResize () {
if (this.map) {
this.sizeMapToContainer();
}
}.bind(this);
我对react的render调用只返回一个div,在后面的mount中,我自己附加了map div
buildMap: function (nextProps) {
var mapProps;
if (nextProps) {
mapProps = nextProps;
} else {
mapProps = this.props;
}
var centerpoint = mapProps.center;
var zoom = mapProps.zoom || 8;
var center = new google.maps.LatLng(centerpoint[1], centerpoint[0]);
var mapNode = this.refs.map.getDOMNode();
var mapOptions = {
center: center,
zoom: zoom
};
if (mapInstance.map) {
window.tmMap = this.map = mapInstance.map;
//check if the nodes are already there
if (!mapNode.hasChildNodes()) {
mapNode.appendChild(mapInstance.node);
}
this.map.setOptions(mapOptions);
} else {
mapInstance.node = document.createElement('div');
mapInstance.node.classList.add('full-height');
mapInstance.map = new google.maps.Map(mapInstance.node, mapOptions);
window.tmMap = this.map = mapInstance.map;
mapNode.appendChild(mapInstance.node);
this.map.setOptions(mapOptions);
}
this.buildMarkers();
this.setMarkers();
this.bindMarkers();
google.maps.event.addListener(this.map, 'idle', this.onIdle);
},
此组件是嵌套组件
请让我知道,如果有任何其他代码,将帮助。我当然使用最新的谷歌地图api,直接使用它 您是否仅在调整窗口大小时调用
google.maps.event.trigger(this.map,'resize')
?您不需要在每次调整div的大小时进行此调用,而不是等待窗口调整大小吗?