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");

});

上記は、すでにマップ上にあるオーバーレイに長方形を追加することになっています。実際には、クリックされた最初のオーバーレイに四角形を追加しますが、別のオーバーレイをクリックしても何も起こりません。

最初のオーバーレイをクリックすると、それが通過し、描画された長方形で終了したと表示されるため、リスナーは呼び出されないようです。その後、別のオーバーレイをクリックしてもアラートは発生しません...

私はかなり長い間これに取り組んできました、助けてください！ありがとう！

EDIT1：

//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次のコードで試してみましたが、まだ1回しか実行されませんでした）

            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 に答える