我有一个我无法弄清楚的问题。我接管了一个使用 google maps API 版本 3 的应用程序。我不是很熟悉它，但我被要求调整一些东西。其中之一需要创建自定义 infoBubbles 而不是使用默认的 infoWindow，以便我们可以将它们设计得很好。我找到了一个名为 infoBox 的类，它可以做到这一点，并按照一些例子来了解我现在的位置。但是，我的应用程序要求每个叠加层（多边形、折线或标记）在 infoBox 上都有一个删除按钮。当我们使用默认的 infoWindow 时，删除与 jQuery click 事件一起工作得很好，但现在我使用的是 infoBox，这非常奇怪。我创建了一个小测试文件来演示该问题。它的要点是当你第一次打开一个信息框时，删除按钮例程仅运行 1 次。但是一旦你关闭盒子，然后再次打开它（或另一个），例程就会运行多次。打开信息框的次数越多，删除按钮重新绑定并依次执行的次数就越多。我在 infoBox 的 domready 侦听器中包装了一些东西，这样我就可以将窗口中的元素更改为特定于正在单击的对象的属性。出于某种原因，domready 被触发了多次（我认为它只会触发一次）并且我的删除点击再次被绑定。在使用 infoBox 类之前，常规的 infoWindow 不需要 domready 即可使用 jQuery 更改标题和描述，并且 click 事件从未反复绑定。我完全不知所措，并且在这方面花费了太多时间。任何帮助，将不胜感激。一个示例测试文件如下：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
//global variables for the info box an for the map
var ib = null;
var theMap = null;
var myOptions = null;
var iw = null;
function initialize() {
//regular google maps setup crap, not important
//
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
var myMapOptions = {
zoom: 7
,center: secheltLoc
,mapTypeId: google.maps.MapTypeId.ROADMAP
};
theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
var marker = new google.maps.Marker({
map: theMap,
draggable: true,
position: new google.maps.LatLng(49.47216, -123.76307),
visible: true
});
var markertwo = new google.maps.Marker({
map: theMap,
draggable: true,
position: new google.maps.LatLng(49.47216, -121.76307),
visible: true
});
//this is how the info box work, create an element and add some styling to it, straight out of the example docs
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
//here i am adding the HTML that i would want my infoBox to contain, test crap for now, but the important part is that
// in the real site, it will have 2 buttons, one to delete the entity you are working with (polygons, polylines, markers) and one
// to open up a new overlay in which you can make edits to information about that entity. Before changing from the default infoWindow
// (which is hard to style) to the new infoBox (which can be styled however you like) the deletes worked fine. Over time and trial and
// error i have noticed that each time you open up an infoBox, the delete is re-binding and executing multiple times.
var infoContent = '';
infoContent += "<div class='info-wrapper'>";
infoContent += "<div class='title-wrapper'><p><strong>This is a great title</strong></p></div>";
infoContent += "<div class='description-wrapper'><p>This is a phenomenal description</p></div>";
infoContent += "<div class='buttons'><p><a class='openLink' href='#'>Open</a></p>"; //<input type='submit' value='Open' />";
infoContent += "<p><a class='deleteLink' href='#'>Delete</a></p></div>";
//close class = info wrapper
infoContent += "</div>";
//assign my new variable of html to the inneHTML of main box element
boxText.innerHTML = infoContent;
iw = new google.maps.InfoWindow({
content: infoContent
});
//set the default options for infoBox, basically same as default example
myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,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
};
//click handlers for the markers
google.maps.event.addListener(marker, "click", function (e) {
openInfoBox(marker, e, 'this is the new title')
});
google.maps.event.addListener(markertwo, "click", function (e) {
openInfoBox(markertwo, e, 'great title')
});
//the infobox itself
ib = new InfoBox(myOptions);
}
//the open info Box function
function openInfoBox(feature, e, text) {
//open the damn thing
ib.open(theMap, feature);
//define a listnener for when the infoBox is ready for jquery to make changes, this is necessary if you want
// to alter the values in the box which i will need to do on MLP, setting the title and description values to
// the node that is being altered
google.maps.event.addListener(ib, 'domready', function() {
//chnage the title to hwatever is passed in for demo sake
$('.title-wrapper p').html('<strong>'+text+'</strong>');
//$('.description-wrapper p').html('i have change the description');
/*******************************************************
HERE IS WHERE THE MAIN PROBLEM LIES THAT IS KILLING ME!!!
When this routine runs on MLP, i have a way to know which
feature is being deleted, and the index is removed from the array,
and the array is reordered. However, for some crazy reason, the more times
you open up an infoWindow, the more times this event fires. And if you are say
trying to delete index 0 of an array of 4 elements, at times this may run 4
times on a single click which then wipes out all your mapping elemetns instead
of just the one you wanted it to delete. NO ME GUSTA!
*******************************************************/
$('.deleteLink').click(function(event) {
event.preventDefault();
alert('you clicked me');
alert('your tricky');
});
});
}
function notify(event) {
event.preventDefault();
alert('test');
alert('test12');
}
</script>
<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 400px"></div>
<p>
This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.
</body>
</html>
在http://midwestfish.djcase.com/infobox/test.html上查看现场演示可能更容易