0

我遇到了一些困难，我的听众似乎只有在我为地图设置一个矩形时才会相互抵消，但在我调用警报或其他任何东西时不会。

这完美地工作：

 google.maps.event.addDomListener(document.getElementById("overlay" + me), 'click', function () {
    displayMessage(me); //displays the current overlay index on screen (IE 1 of 30)
});

以上只是在地图上显示了叠加层的索引（IE 1 of 30）。它适用于使用适当的覆盖索引单击的每个覆盖。

这不是那么多：

google.maps.event.addDomListener(document.getElementById("overlay" + me), 'click', function () {

    alert("Called");
    curOverlayRectangle.setOptions(overlayRectangleOptions); //defined by C# to js
    curOverlayRectangle.setBounds(incomingOverlayBounds[me]);
    curOverlayRectangle.setMap(map);
    alert("Finished");

});

上面应该在地图上已经存在的叠加层上添加一个矩形。它实际上所做的是为单击的第一个覆盖添加矩形，但是如果我单击另一个覆盖，则没有任何反应。

似乎从未调用过侦听器，因为一旦我单击第一个叠加层，它就会通过并说完成了绘制的矩形。然后我继续单击另一个叠加层并且没有出现警报......

我已经为此工作了一段时间，请帮助！谢谢！

编辑1：

//get is simply the index
function tempAddListener(get) {

    //alert("adding: " + get);
    if (document.getElementById("overlay" + get) != null) { //check to see if div is there
        google.maps.event.addDomListener(document.getElementById("overlay" + get), 'click', function () {

            displayMessage("listener fired at overlay: " + get); //if enabled, works fine
            //displayOverlayRectangle(incomingOverlayBounds[get]); //if enabled, listener fires but seems to delete all my other listeners for the overlays

        });
    } else {
        //could not find the div
    } 

}

编辑2

//took out all defines

//#region geoObjs
var incomingOverlayBounds = [];
var incomingOverlaySourceURL = [];
var incomingOverlayRotation = [];
var incomingOverlayRectangle = [];
function initOverlays(){
  //most of these are taken out
  incomingOverlayBounds[0] = new google.maps.LatLngBounds( new google.maps.LatLng(29.7883456702236,-82.384843759249), new 
  incomingOverlayRotation[16] = 0;
  incomingOverlayBounds[17] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4715356702236,-82.3839748493845), new google.maps.LatLng(29.51265,-82.33674));
  incomingOverlaySourceURL[17] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_20.jpg";
  incomingOverlayRotation[17] = 0;
  incomingOverlayBounds[18] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4584356702236,-82.3840587432067), new google.maps.LatLng(29.49955,-82.33683));
  incomingOverlaySourceURL[18] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_21.jpg";
  incomingOverlayRotation[18] = 0;
  incomingOverlayBounds[19] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4431556702236,-82.4158516259991), new google.maps.LatLng(29.48427,-82.36863));
  incomingOverlaySourceURL[19] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_022.jpg";
  incomingOverlayRotation[19] = 0;
  incomingOverlayBounds[20] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4593656702236,-82.4157191765652), new google.maps.LatLng(29.50048,-82.36849));
  incomingOverlaySourceURL[20] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_023.jpg";
  incomingOverlayRotation[20] = 0;
  incomingOverlayBounds[21] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4736856702236,-82.4151858519302), new google.maps.LatLng(29.5148,-82.36795));
  incomingOverlaySourceURL[21] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_024.jpg";
  incomingOverlayRotation[21] = 0;
  incomingOverlaySourceURL[51] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_054.jpg";
  incomingOverlayRotation[51] = 0;

  displayIncomingOverlays();

}
//#endregion        


function initialize() {
    //initialize google map objects
    map = new google.maps.Map(document.getElementById(gmapPageDivId), gmapOptions);                             //initialize map    
    initOverlays(); //initialize all the incoming overlays
}

var incomingOverlayBounds = [];
var incomingOverlaySourceURL = [];
var incomingOverlayRotation = [];
var overlays = [];
function displayIncomingOverlays() {
    for (var i = 0; i < incomingOverlayBounds.length; i++) {
        overlaysOnMap[i] = new CustomOverlay(incomingOverlayBounds[i], incomingOverlaySourceURL[i], map, incomingOverlaySourceURL[i]);
        overlaysOnMap[i].setMap(map);

        //displayOverlayRectangle(incomingOverlayBounds[i]); //add all the rectangles
    }
}

function CustomOverlay(bounds, image, map, rotation) {
    //iterate here
    overlayCount++;

    // Now initialize all properties.
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;

    preservedRotation = rotation;

    if (overlayPrevious != null) {
        overlayPrevious.setMap(null);
    }

    // We define a property to hold the image's div. We'll
    // actually create this div upon receipt of the onAdd()
    // method so we'll leave it null for now.
    this.div_ = null;
}
CustomOverlay.prototype.onAdd = function () {

    if (overlayPrevious != null) {
        overlayPrevious.setMap(null);
    }

    // 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.id = "overlay" + overlaysOnMap.indexOf(this);
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';
    div.style.opacity = preserveOpacity;

    // Create an IMG element and attach it to the DIV.
    var img = document.createElement('img');
    img.src = incomingOverlaySourceURL[overlaysOnMap.indexOf(this)]; //this.image
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.position = 'absolute';
    div.appendChild(img);

    //get the index
    var overlayIndex = overlaysOnMap.indexOf(this);

    // 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 overlayLayer pane.
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);

    //add the listener
    tempAddListener(overlayIndex);

};
CustomOverlay.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';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';

    //for a preserved rotation
    if (preservedRotation != 0) {
        //keepRotate(preservedRotation);
    }
};
//CustomOverlay.prototype.onRemove = function () {
//    this.div_.parentNode.removeChild(this.div_);
//    this.div_ = null;
//};
function tempAddListener(get) {
    alert("div: "+document.getElementById("overlay" + get).innerHTML);
    alert("adding with index: " + get);
    if (document.getElementById("overlay" + get) != null) { //check to see if div is there
        google.maps.event.addDomListener(document.getElementById("overlay" + get), 'click', function () {

            alert("listener fired at overlay: " + get);

            displayOverlayRectangle(incomingOverlayBounds[get]);
            //alert(incomingOverlayBounds[get]);


            //overlayRectangles[get] = displayOverlayRectangle(incomingOverlayBounds[get]);
            //overlayRectangles[get].setMap(map);

        });
    } else {
        //could not find the div
    } 

}

function displayOverlayRectangle(bounds) {
    //2do: set drawing manager, set mode, match listeners of rectangle
    var tempOverlayRectangle = new google.maps.Rectangle();
    var tempOverlayRectangleOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.1,
        editable: true,
        draggable: true,
        //strokeOpacity: 0.2,
        //strokeWeight: 1,
        //fillOpacity: 0.0, 
        zindex: 5 
    };

    tempOverlayRectangle.setOptions(tempOverlayRectangleOptions);
    tempOverlayRectangle.setBounds(bounds);
    tempOverlayRectangle.setMap(map);

    google.maps.event.addListener(tempOverlayRectangle, "click", function () {
        alert("can't touch this");
    });

    //return tempOverlayRectangle;

    //tempOverlayRectangle.setOptions(tempOverlayRectangleOptions);
    //tempOverlayRectangle.setBounds(bounds);
    //tempOverlayRectangle.setMap(map);
}



//start this whole mess once 
google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="googleMap"></div>

更新

似乎侦听器上的任何地图代码都会使其他侦听器无效。（IE我用下面的代码试了一下，它仍然只运行了一次）

            google.maps.event.addDomListener(document.getElementById("overlay" + get), 'click', function () {

            if (map.getMapTypeId() == 'TERRAIN') {
                map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
            } else {
                map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
            }

        });
4

1 回答 1

0

解决了

最重要的是，DOM 无法正确访问我创建的叠加层。因此，我创建了一个不可见的矩形覆盖在可以访问的覆盖层之上。

片段：

    var incomingOverlayBounds = [];         //defined in c# to js on page
var incomingOverlaySourceURL = [];      //defined in c# to js on page
var incomingOverlayRotation = [];       //defined in c# to js on page
var ghostOverlayRectangle = [];         //holds ghost overlay rectangles (IE overlay hotspots)
var ghostOverlayRectangleOptions = {    //define options for ghost rectangle
    strokeColor: "#FF0000",             //color doesnt matter
    strokeOpacity: 0.0,                 //make border invisible
    strokeWeight: 1,                    //should not matter?
    fillColor: "#FF0000",               //color doesnt matter
    fillOpacity: 0.0,                   //make fill transparent
    editable: false,                    //just to be sure?
    draggable: false,                   //just to be sure?
    zindex: 6                           //perhaps higher?
};
var visibleOverlayRectangleOptions = {  //define options for visible rectangle 
    strokeColor: "#FF0000",             //for testing (red)
    strokeOpacity: 0.8,                 //for testing
    strokeWeight: 2,                    //for testing
    fillColor: "#FF0000",               //for testing (red)
    fillOpacity: 0.1,                   //for testing
    editable: true,                     //sobek standard
    draggable: true,                    //sobek standard
    //strokeOpacity: 0.2,              //sobek standard
    //strokeWeight: 1,                 //sobek standard
    //fillOpacity: 0.0,                   //sobek standard 
    zindex: 5                           //sobek standard
};
var visibleOverlayRectangle = new google.maps.Rectangle(); //init maybe move to array later

//Displays all the overlays sent from the C# code. Also calls displayGhostOverlayRectangle.
function displayIncomingOverlays() {
    //go through and display overlays as long as there is an overlay to display
    for (var i = 0; i < incomingOverlayBounds.length; i++) {
        overlaysOnMap[i] = new CustomOverlay(incomingOverlayBounds[i], incomingOverlaySourceURL[i], map, incomingOverlayRotation[i]);
        overlaysOnMap[i].setMap(map);                                               //set the overlay to the map
        displayGhostOverlayRectangle(incomingOverlayBounds[i],i);                   //add all the ghost rectangles
    }
}

//Displays an invisible rectangle on top of the overlay div (creates a hotspot). This rectangle is used as a psuedo listener if the 'overlay div' is clicked. This solved issue of creating listener for overlay div directly.
//Supporting URL: http://stackoverflow.com/questions/17025240/google-maps-listener-only-running-once
function displayGhostOverlayRectangle(ghostBounds,ghostIndex) {
    ghostOverlayRectangle[ghostIndex] = new google.maps.Rectangle();                //init rect
    ghostOverlayRectangle[ghostIndex].setOptions(ghostOverlayRectangleOptions);     //set options
    ghostOverlayRectangle[ghostIndex].setBounds(ghostBounds);                       //set bounds
    ghostOverlayRectangle[ghostIndex].setMap(map);                                  //set to map
    //create the listener for this ghost rectangle
    google.maps.event.addListener(ghostOverlayRectangle[ghostIndex], 'click', function () {
        displayVisibleOverlayRectangle(ghostBounds, ghostIndex);                    //add the visible rectangles
    });
}

//Displays the visible rectangle which is used to edit an overlay. Called by the ghost listener.    
function displayVisibleOverlayRectangle(bounds, overlayIndex) {
    visibleOverlayRectangle.setOptions(visibleOverlayRectangleOptions);
    visibleOverlayRectangle.setBounds(bounds);
    visibleOverlayRectangle.setMap(map);
}

//Starts the creation of a custom overlay div which contains a rectangular image.
//Supporting URL: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays
function CustomOverlay(bounds, image, map, rotation) {
    overlayCount++;                 //iterate how many overlays have been drawn
    this.bounds_ = bounds;          //set the bounds
    this.image_ = image;            //set source url
    this.map_ = map;                //set to map
    preservedRotation = rotation;   //set the rotation
    this.div_ = null;               //defines a property to hold the image's div. We'll actually create this div upon receipt of the onAdd() method so we'll leave it null for now.
}

//Continues support for adding an custom overlay
//Supporting URL: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays
// 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.
CustomOverlay.prototype.onAdd = function () {

    // Create the DIV and set some basic attributes.
    var div = document.createElement("div");
    div.id = "overlay" + overlaysOnMap.indexOf(this);
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';
    div.style.opacity = preserveOpacity;

    // Create an IMG element and attach it to the DIV.
    var img = document.createElement('img');
    img.src = incomingOverlaySourceURL[overlaysOnMap.indexOf(this)]; //this.image
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.position = 'absolute';
    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 overlayLayer pane.
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);     
};

//Continues support for adding an custom overlay
//Supporting URL: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays
CustomOverlay.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';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';

    //for a preserved rotation
    if (preservedRotation != 0) {
        keepRotate(preservedRotation);
    }
};

//Not currently used
//Supporting URL: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays
CustomOverlay.prototype.onRemove = function () {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
};
于 2013-06-11T18:05:22.237 回答