问题：
点击新标记时，信息气泡选项卡不重置
杨经武
我正在使用api V3的infobubble和选项卡。第一个标记一切都很好，3个选项卡显示正确的数据。然后单击另一个标记，第一个标记选项卡（包含数据）将与新标记3选项卡一起显示，因此，当单击第二个标记时，将显示6个选项卡。当您单击第三个标记时，窗口关闭，然后新的标记信息气泡将出现，其中包含该标记的前6个选项卡，然后是新的3个选项卡，因此每次单击都会出现9个选项卡。基本上，当您单击第二个标记时，第一个标记窗口需要关闭，第二个标记只需要打开该标记的3个选项卡，而不需要打开以前打开的标记的所有其他选项卡。我希望这是清楚的。以下是完整的页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Activities</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="GoogleMaps/Scripts/downloadxml.js"></script>
<script type="text/javascript" src="GoogleMaps/Scripts/infobubble_tabs.js"></script>
<style type="text/css">
html, body { height: 100%; }
.style1
{
width: 758px;
}
.style2
{
width: 349px;
}
#side_bar
{
height: 550px;
width: 349px;
overflow:scroll;
}
</style>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
var gmarkers = [];
var gicons = [];
var map = null;
var InfoBubble = new InfoBubble({
maxWidth: 300
});
//defines icon if there is none stated
gicons["red"] = new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(9, 9));
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png',
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(9, 9));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
new google.maps.Size(37, 34),
new google.maps.Point(0, 0),
new google.maps.Point(9, 9));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which traces out a polygon as a series of X,Y points. The final coordinate closes
//the poly by connecting to the first coordinate.
var iconShape = {
coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
type: 'poly'
};
//determines icon based on category
//if no icon is defined
function getMarkerImage(iconColor) {
if ((typeof (iconColor) == "undefined") || (iconColor == null)) {
iconColor = "red";
}
if (!gicons[iconColor]) {
gicons[iconColor] = new google.maps.MarkerImage(iconColor,
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(9, 9));
}
return gicons[iconColor];
}
function category2icon(category) {
var color = "red";
switch (category) {
case "Hike": color = "GoogleMaps/Images/HikingIcon.jpg";
break;
case "Camping": color = "GoogleMaps/Images/camping.gif";
break;
case "StatePark": color = "GoogleMaps/Images/statepark.jpg";
break;
case "NationalPark": color = "GoogleMaps/Images/NationalPark_icon.png";
break;
case "PointsofInterest": color = "GoogleMaps/Images/POI.png";
break;
default: color = "red";
break;
}
return color;
}
gicons["Hike"] = getMarkerImage(category2icon("Hike"));
gicons["Camping"] = getMarkerImage(category2icon("Camping"));
gicons["StatePark"] = getMarkerImage(category2icon("StatePark"));
gicons["NationalPark"] = getMarkerImage(category2icon("NationalPark"));
gicons["PointsofInterest"] = getMarkerImage(category2icon("PointsofInterest"));
// A function to create the marker and set up the event window
function createMarker(latlng, name, tab1, tab2, tab3, category) {
var contentString = tab1;
var contentString2 = tab2;
var contentString3 = tab3;
var marker = new google.maps.Marker({
position: latlng,
icon: gicons[category],
shadow: iconShadow,
map: map,
title: name,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
// === Store the category and name info as a marker properties ===
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
// to open the info bubbles
google.maps.event.addListener(marker, 'click', function () {
InfoBubble.open(map, marker);
InfoBubble.addTab('Details', contentString);
InfoBubble.addTab('Notes', contentString2);
InfoBubble.addTab('Campground Map', contentString3);
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category + "box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category + "box").checked = false;
// == close the info window, in case its open on a marker that we just hid
InfoBubble.close();
}
// == a checkbox has been clicked ==
function boxclick(box, category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(39.364032, -77.182159),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Closes any open bubbles before opening new one
google.maps.event.addListener(map, 'click', function () {
InfoBubble.close();
});
//Downloads the data from xml file
// Reads the data the creates each tab
downloadUrl("GoogleMaps/categories.xml", function (doc) {
var xml = xmlParse(doc);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat, lng);
var address = markers[i].getAttribute("address");
var city = markers[i].getAttribute("city");
var state = markers[i].getAttribute("state");
var zip = markers[i].getAttribute("zip");
var name = markers[i].getAttribute("name");
var notes = markers[i].getAttribute("notes");
var url = markers[i].getAttribute("url");
var image = markers[i].getAttribute("image");
var tab1 = "";
tab1 += "<b>" + name + "<\/b><p>";
tab1 += address + "</br>";
tab1 += city + ", " + state + " " + zip + "</br>";
tab1 += '<br><src="_blank" href="'+url+'">'+url+'</a>' + "</br>";
var tab2 = notes;
var tab3 = "";
tab3 += '<img src="'+image+'">' + "</br>";
tab3 += "Or online at:";
tab3 += '<br><a target="_blank" href="'+image+'">'+image+'</a>' + "</br>";
var category = markers[i].getAttribute("category");
// create the marker
var marker = createMarker(point, name, tab1, tab2, tab3, category);
}
// == show or hide the categories initially ==
show("Hike");
hide("Camping");
hide("StatePark");
hide("NationalPark");
hide("PointsofInterest");
// == create the initial sidebar ==
makeSidebar();
});
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<table border="1" >
<tr>
<td class="style1">
<div id="map" style="width:978px; height: 596px"></div>
</td>
<td valign="top" style="text-decoration: underline; color: #4444ff;"
class="style2">
<div id="side_bar"></div>
</td>
</tr>
</table>
<form action="#">
Hiking: <input type="checkbox" id="Hikebox" onclick="boxclick(this,'Hike')" />
Camping: <input type="checkbox" id="Campingbox" onclick="boxclick(this,'Camping')" />
State Parks: <input type="checkbox" id="StateParkbox" onclick="boxclick(this,'StatePark')" />
National Parks: <input type="checkbox" id="NationalParkbox" onclick="boxclick(this,'NationalPark')" />
Points of Interest: <input type="checkbox" id="PointsofInterestbox" onclick="boxclick(this,'PointsofInterest')" />
<br />
</form>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
</body>
</html>
共有1个答案
韦澄邈
删除所有选项卡（如果存在），或者销毁infobubble并创建一个新选项卡。
概念验证-删除/重新创建infoBubble
// to open the info bubbles
google.maps.event.addListener(marker, 'click', function () {
if (infoBubble.getMap() != null) {
infoBubble.close()
delete infoBubble;
infoBubble = new InfoBubble({
maxWidth: 300
});
}
infoBubble.open(map, marker);
infoBubble.addTab('Details', contentString);
infoBubble.addTab('Notes', contentString2);
infoBubble.addTab('Campground Map', contentString3);
});
概念验证-删除选项卡
// to open the info bubbles
google.maps.event.addListener(marker, 'click', function () {
infoBubble.open(map, marker);
infoBubble.removeTab(2);
infoBubble.removeTab(1);
infoBubble.removeTab(0);
infoBubble.addTab('Details', contentString);
infoBubble.addTab('Notes', contentString2);
infoBubble.addTab('Campground Map', contentString3);
});
类似资料：
-
我在数据库中有四个条目，我正在使用翻新来获取所有数据。API工作得很好，我得到了所有必要的数据。我想显示用户的姓名，地址，号码和技能（来自数据库）在标记点击和设置他们在自定义警报对话框。 mapfragment.java：
-
我正在开发一个应用程序，使用ActionBar导航，我有3个标签（我不使用tabhost）如下图： 在第一个选项卡中，将显示一个名为FragmentListItem的片段，如果单击Item1，FragmentListItem将被另一个名为FragmentItemDetails的片段替换，该片段显示所选项的详细信息。 我的问题是，当我选择Tab2或tab3，然后再次选择Tab1，我得到的不再是fra
-
我有一个复杂的UI设置，如下所示： 谢谢你。
-
我显示了一个标记来显示用户的位置，这是通过电话GPS获得的，并且我添加了一个FolderOverlay来分组其他标记（这些标记表示使用自定义API检索的Wikipedia中的POI）。 我在我的项目中包含了bonuspack_bubble.xml布局文件，因为我想修改它以适当地缩放“More Info”按钮。 问题 谢谢！ 注意：使用osmbonuspack V5.3(AAR)、osmdroid
-
我正在尝试在我的网站上做一个标签功能，我希望有那个标签响应。所以我做了这样的代码： null null 现在我有两样东西， > 首先，我希望在单击标题（伦敦、巴黎、东京）时关闭选项卡，然后在单击该标题时从该标题中删除活动类。 其次，我希望有两个标签在行的响应，第三个标签在第二行，然后单击打开被点击的标签，然后向下推第三个标签。 任何提示都会有帮助，提前谢谢
-
我已经创建了一个应用程序的布局有三个标签在Android2.3。每个选项卡都有一个片段，在每个片段中，都有一个列表视图。在列表视图中显示的所有数据都来自互联网，数据总是在变化，所以每次我看那个片段的时候都想重新加载数据。例如，我现在正在观看“tab1”，当我单击“tab2”时，“tab2”中的数据将重新加载，而当我单击返回“tab1”时，“tab1”中的数据也将再次重新加载。我试过了 TabSAd