Question

使用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（）（因此是NPE）时，this.div为null。据我所知，地图已填充且有效。同样，这只发生在Google Maps API的3.32和3.33中。我无法找到导致此问题的文档中的任何更改，并且现在已经停留了一天。我现在可以坚持使用3.31，但据说这是八月的日落。

Answer 1

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

Google 3.32导致MapOverlay错误

1 个答案: