html - 在信息框中使用 closeclick 事件

Question

我厌倦了搜索如何在 infobox(google maps) 中应用 closeclick 事件。我尝试了几乎所有我能想到的场景，但没有成功。请帮助我

这是我添加标记的代码:-

var ib_click = new InfoBox();
ib_click.isOpen = false;
var toShowHover = true;

function add_marker(lat,lng,icn,title,box_html) {
  var mapcode,myOptions;
  var marker = new google.maps.Marker({
    /*marker settings*/
  });   


  myOptions = {
    /*option of infobox*/
  };
  marker.ibOptions = myOptions;
  google.maps.event.addListener(marker, 'click', function() {
    mapcode = /* html for showing box */
    myOptions.content = mapcode;
    myOptions.boxStyle.width = "235px";
    ib_click.setOptions(marker.ibOptions);
    ib_click.open(map, marker);
    ib_click.isOpen = true;

    toShowHover = false;
  });   
  google.maps.event.addListener(marker, 'mouseover', function() {
    //this is fired
    var mapcode = /*html for showing hover*/;
    //ib_click.open(map, marker);
    myOptions.content = mapcode;
    myOptions.boxStyle.width = "205px";
    ib_click.setOptions(marker.ibOptions);
    ib_click.open(map, marker);
    // ib_click.isOpen = true;
  });   
  google.maps.event.addListener(marker, 'mouseout', function() {
    //alert('mouse out');//this is fired
    //toShowHover = true;
  });

  google.maps.event.addListener(ib_click, 'closeclick', function(){
    //how to use closeclick 
    //showing error here
    alert('closed');
  });
  return marker;
}

求指教，谢谢安库尔;(

Answer 1

尝试将关闭点击的监听器添加到框打开之后的右边，在 }) 之前标签。创建框时，您需要为每个框包含监听器。

下面是我使用关闭点击监听器的代码。

function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
icon: "/mapping/redmarker1.png",
title:markerClickGrid
});
markers.push(marker);
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: gray; padding: 5px; color:white;";
    boxText.innerHTML = marker.title;
    var myOptions = {
     content: boxText
    ,disableAutoPan: false
    ,maxWidth: 0
    ,pixelOffset: new google.maps.Size(10, -50)
    ,zIndex: null
    ,boxStyle: { 
    background: "url('tipbox.gif') no-repeat"
    ,opacity: 0.75
    ,width: "140px"
    }
    ,closeBoxMargin: "10px 2px 2px 2px"
    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
    ,infoBoxClearance: new google.maps.Size(1, 1)
    ,isHidden: false
    ,pane: "floatPane"
    ,enableEventPropagation: false
    };
    var ib = new InfoBox(myOptions);
    ib.open(map,marker);
    preventmarkermouseoutibclose = true;

google.maps.event.addListener(ib, 'closeclick', function(event) {
    preventmarkermouseoutibclose = false;
    document.getElementById('debugtext').value = "ib close click detected";
});
google.maps.event.addListener(marker, 'click', function() {
    ib.open(map,marker);
    preventmarkermouseoutibclose = true;
    document.getElementById('debugtext').value = "ib open detected";
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
    ib.close(map,marker);
    marker.setMap(null);
    preventmarkermouseoutibclose = false;
    document.getElementById('debugtext').value = "ib close on rightclick detected";
});
google.maps.event.addListener(marker, "mouseover", function() {
    document.getElementById('debugtext').value = "marker mouseover detected";
    ib.open(map,marker);
});
google.maps.event.addListener(marker, "mouseout", function() {
    if(preventmarkermouseoutibclose==true){
    }
    else if(preventmarkermouseoutibclose==false){
    ib.close(map,marker);
    }
});

ib 是我的信息框的名称。每次打开信息框 ib 时，都会添加一个监听器，寻找“closeclick”。

这对我有用。希望它对你有用。