Javascript 具有InfoWindow行为的InfoBox
我一直致力于为我的一个网页实现InfoBox代码,通过一些很好的培训,我已经能够做到这一点。目前,我可以在表单加载时让框显示在每个标记上,但我真的希望它在表单加载时不显示框,然后,当用户单击“标记A”时,信息框出现,地图平移以使标记单击地图的中心,就像信息窗口一样 然后,如果用户单击“标记B”,原始信息框将移动到新单击的标记,再次平移地图并将其居中到该标记 我已经看过谷歌网站上的所有文档,但我找不到如何做到这一点。我只是想知道是否可能有人会让我这么做。请在下面找到我的代码Javascript 具有InfoWindow行为的InfoBox,javascript,html,google-maps-api-3,Javascript,Html,Google Maps Api 3,我一直致力于为我的一个网页实现InfoBox代码,通过一些很好的培训,我已经能够做到这一点。目前,我可以在表单加载时让框显示在每个标记上,但我真的希望它在表单加载时不显示框,然后,当用户单击“标记A”时,信息框出现,地图平移以使标记单击地图的中心,就像信息窗口一样 然后,如果用户单击“标记B”,原始信息框将移动到新单击的标记,再次平移地图并将其居中到该标记 我已经看过谷歌网站上的所有文档,但我找不到如何做到这一点。我只是想知道是否可能有人会让我这么做。请在下面找到我的代码 <!DOCTYP
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All Locations</title>
<link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript" src="js/infobox.js"></script>
<script type="text/javascript">
var customIcons = {
0: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'roadmap'
});
// Change this depending on the name of your PHP file
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var totalfinds = markers[i].getAttribute("totalfinds");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var html = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";
var icon = {};
if (totalfinds == 0) {
icon = customIcons[0];
} else if (totalfinds >= 1) {
icon = customIcons[1];
}
var marker = new google.maps.Marker({
map: map,
position: point,
title: address,
icon: icon.icon,
shadow: icon.shadow
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";
var 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
};
编辑结束
bounds.extend(point);
map.fitBounds(bounds);
var infoBox = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', function() {
infoBox.open(map, this);
map.setCenter(this.position;
});
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onLoad="load()">
<div id="map"></div>
</body>
</html>
函数下载url(url,回调){
var请求=window.ActiveXObject?
新的ActiveXObject('Microsoft.XMLHTTP'):
新的XMLHttpRequest;
request.onreadystatechange=函数(){
如果(request.readyState==4){
request.onreadystatechange=doNothing;
回调(请求、请求、状态);
}
};
打开('GET',url,true);
请求发送(空);
}
函数doNothing(){}
我从未使用过infoBox,但我认为它与标准的信息窗口非常相似。您需要使用将单击操作添加到将打开信息框并使地图居中的标记
类似于此:
//register the single left click event.
google.maps.event.addListener(marker, "click", function (event) {
//you may have to create a another box here or just change the content
//Google's standard info window only creates one instance and then you change
//the content during this event i.e. infoWindow.setContent("some html");
infoBox.open(map, this);
map.setCenter(this.position);
});
最新答复:
好的,看起来您在循环中的每次迭代中都会覆盖信息框,所以只剩下最后一次创建了。您可以在循环外部构建一个信息框,但不设置内容属性,然后在侦听器内部设置内容
您需要将内容存储在其他地方,以防止其被覆盖。
尝试在标记中设置内容,并像这样引用它
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";
var marker = new google.maps.Marker({
map: map,
position: point,
title: address,
icon: icon.icon,
shadow: icon.shadow,
html: boxText
});
google.maps.event.addListener(marker, "click", function (event) {
infoBox.setContent(this.html);
infoBox.open(map, this);
map.setCenter(this.position);
});
var-boxText=document.createElement(“div”);
boxText.style.cssText=“边框:1px纯黑色;页边距顶部:8px;背景:黄色;填充:5px;”;
boxText.innerHTML=locationname+“”+”找到的数量:“+”+totalfinds+“+””;
var marker=new google.maps.marker({
地图:地图,
位置:点,,
标题:地址,
icon:icon.icon,
shadow:icon.shadow,
html:boxText
});
google.maps.event.addListener(标记,“单击”,函数(事件){
setContent(this.html);
打开(地图,这个);
地图设置中心(此位置);
});
您好,非常感谢您回复我的帖子和建议的代码。我一直在使用它,我可以让信息框和“地图中心”功能正常工作,但无论单击哪个标记,它都只显示最后一个标记的详细信息(在地图顶部最远的地方。我已经用我的新代码更新了我原来的帖子。你可以看一下这个,让我知道我做错了什么。非常感谢和亲切的问候克里斯。当然,我会看一看,尽管我没有看到你对原来帖子所做的编辑。你能再次尝试更新这个问题吗。嗨,希望您现在能看到它们。我一直在尝试对编辑的部分进行不同的排列,不幸的是没有任何运气。非常感谢您的时间和麻烦。向ChrisHi致以亲切的问候,非常感谢。原谅我,我对这一点有点陌生。我将html行放在下面,html:boxText locationname+“”+“找到的数量:”+“”+totalfinds++“”;您能告诉我是否正确吗?抱歉,我认为该注释有点混乱。您已经创建了boxText变量并设置了其内容,只需确保在创建标记之前创建了该变量,并将html行设置为该变量。此外,不要在末尾放分号,因为它位于对象内部,如果在变量后添加分号,将出现java脚本错误。我将编辑答案以使其更清楚。