javascript - Google 3.32 导致 MapOverlay 错误
问题描述
使用 3.31 一切正常,但是当我使用 3.32 或 3.33 脚本时,我的覆盖无法加载。这是我的自定义覆盖类:
function MapOverlay(bounds, image, map) {
// Now initialize all properties.
var sw = new google.maps.LatLng(bounds.southWest.latitude, bounds.southWest.longitude);
var ne = new google.maps.LatLng(bounds.northEast.latitude, bounds.northEast.longitude);
//if (westernCorner.longitude > easternCorner.longitude)
this.bounds = new google.maps.LatLngBounds(sw, ne);
this.image = image;
this.map = map;
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
MapOverlay.prototype = new google.maps.OverlayView();
MapOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('DIV');
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
// Create an IMG element and attach it to the DIV.
var img = document.createElement("img");
img.src = this.image;
img.style.width = "100%";
img.style.height = "100%";
div.appendChild(img);
// Set the overlay's div_ property to this DIV
this.div = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
MapOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
console.log("ne.x: " + ne.x + " sw.x " + sw.x + " width: " + (ne.x - sw.x));
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
MapOverlay.prototype.onRemove = function() {
this.div.parentNode.removeChild(this.div);
this.div = null;
};
// Note that the visibility property must be a string enclosed in quotes
MapOverlay.prototype.hide = function() {
if (this.div) {
this.div.style.visibility = "hidden";
}
};
MapOverlay.prototype.show = function() {
if (this.div) {
this.div.style.visibility = "visible";
}
};
这是设置叠加层的位置:
addImageOverlay: function(bounds, url, hidden) {
var ne = new google.maps.LatLng(bounds.northEast.latitude,
bounds.northEast.longitude);
var sw = new google.maps.LatLng(bounds.southWest.latitude,
bounds.southWest.longitude);
var b = new google.maps.LatLngBounds(sw, ne);
if(this.imageOverlay){
this.imageOverlay.setMap(null);
this.imageOverlay = null;
}
this.imageOverlay = new MapOverlay(bounds, url, this.map);
this.imageOverlay.setMap(this.map);
if (hidden === true) {
this.imageOverlay.setMap(null);
} else {
this.imageOverlay.setMap(this.map);
}
return this.imageOverlay;
}
我得到的错误是:
Cannot read property 'parentNode' of null
at MapOverlay.onRemove (MapOverlay.js:90)
据我所知,当我调用 setMap(map) 时,似乎没有调用 onAdd() 方法。因此,在调用 onRemove() 时 this.div 为空(因此是 NPE)。据我所知,地图已填充且有效。同样,这仅在 Google Maps API 的 3.32 和 3.33 中发生。我在文档中找不到任何会导致此问题的更改,并且已经卡了一天。我现在可以坚持使用 3.31,但据说 8 月日落。
解决方案
MapOverlay.prototype.onRemove = function() {
if (this.div && this.div.parentNode) {
this.div.parentNode.removeChild(this.div);
}
this.div = null;
};
添加了 IF 块,这将解决问题。请在下面找到参考链接:- 1. https://github.com/googlemaps/v3-utility-library/issues/393 2. https://github.com/enyo/dropzone/issues/1083
推荐阅读
- objective-c - tkeclipse 不再支持 Objective-C 垃圾回收
- python - 在不执行代码的情况下获取 Python 函数的完全限定名
- python - 有条件地读取数据
- xml - 在 Spark 中读取 XML
- php - 根据 GDPR 阻止所有欧盟访客
- mysql - 添加了 WHERE 子句的 MYSQL 语法
- python - 无法弄清楚为什么脚本没有进一步发展
- xamarin.ios - sfChart reset data for graph
- angularjs - 将数据从 Node & Express 中的查询存储到 AngularJS 的安全方法是什么?
- c++ - 存储指向整数向量向量元素的指针向量