Bri*_*ams 4 jquery google-maps infobox
我遇到了一个我无法弄清楚的问题.我接手了一个使用谷歌地图API版本3的应用程序.我对它并不熟悉,但我被要求调整一些事情.其中一个需要创建自定义infoBubbles而不是使用默认的infoWindow,以便我们可以设置好它们.我发现了一个名为infoBox的类,它将执行此操作并按照一些示例来获取我现在所处的位置.但是,我的应用程序要求每个叠加(多边形,折线或标记)在infoBox上都有一个删除按钮.当我们使用默认的infoWindow时,删除工作正常,jQuery点击事件,但现在我使用的是infoBox非常奇怪.我创建了一个小的测试文件来演示这个问题.它的要点是,第一次打开infoBox时,删除按钮例程只运行一次.但是一旦你关闭盒子并再次打开它(或者不同的盒子),例程就会多次运行.打开infoBoxes的次数越多,删除按钮重新绑定并反过来执行的次数就越多.我有东西包含在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上看到现场演示可能更容易
尝试改变这个:
$('.deleteLink').click(function(event) {})
至:
$('.deleteLink').off('click').on('click', function(event){});
澄清问题是什么以及为什么这应该起作用.每次单击该点时都会调用openInfoBox().您可以通过垃圾邮件单击该点然后单击删除来重新创建该错误.这是因为每次单击该点时它都会运行该功能并将单击绑定到删除按钮上.
为了防止它首先取消绑定(关闭)然后重新绑定它(打开).
| 归档时间： |
|
| 查看次数： |
1309 次 |
| 最近记录： |