通过在另一个分区的谷歌地图信息窗口上单击按钮来更改分区的内容
Changing the content of a division by clicking a button on the google maps infowindow in another division
我有一个被划分为多个部分的网页。。
一个部门有一张使用谷歌地图api的地图。。地图上有标记。。当我点击标记时，会打开一个信息窗口。
现在我正试图在信息窗口上放置一个按钮，单击该按钮应该会更改另一个部门的内容出现在我的html页面中。
我在jquery中使用了类似的东西
<script>
$("#target").click(function() {
$("#change").html("<img src='floorplans/T2_2.jpg' style='width:100%; height:90%' />");
});
</script>
但当网页上出现以id为目标的按钮时，这种方法可以很好地工作。。但当我把它放在信息窗口上时，就不起作用了
我的谷歌地图脚本显示一个按钮是这样的：
function setContentString(buildingName, buildingID){
var content=''+buildingName+' <iframe src ="http://x.x.x.x/cgi-bin/perltest.cgi?location='+buildingID+' "width="100%" hieght="100%" frameborder ="0" ></iframe></input><button type="button" id="target">click to change</button>';
return content;
}
有人能帮我解决这个问题吗。。
更新：
我的网页代码：
<!DOCTYPE html>
<html>
<head>
<title>University of Houston-EMP</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style_emp.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBybWW3YvKrvCK7SggZJwS0NbPE_Kv3aQg&sensor=true">
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
<!-- script to load the floor plans-->
//<script>
<!-- load floorp ends -->
var map = null;
var mapOptions = null;
var clickIcon = null;
var shadow = null;
var infoWindow;
var building1;
var setBuildings=new Array();
function markerObject(latValue,longValue,buildingName, map){
this.marker=new google.maps.Marker({
position: new google.maps.LatLng(latValue, longValue),
map: map,
title:buildingName
});
}
function createStringLocation(latValue,longValue){
var stringLocation=latValue.toString()+":"+longValue.toString();
return stringLocation;
}
function setContentString(buildingName, buildingID){
var content=''+buildingName+' <iframe src ="http://x.x.x.x/cgi-bin/perltest.cgi?location='+buildingID+' "width="100%" hieght="100%" frameborder ="0" ></iframe></input><button type="button" id="target">click to change</button>';
return content;
}
function buildingObject (buildingName,buildingID,latValue,longValue,areaMap){
this.buildingID=buildingID;
this.buildingLat=latValue;
this.buildingLong=longValue;
this.buildingName=buildingName;
this.popupContent=setContentString(this.buildingName, this.buildingID);
this.infoWindow=new google.maps.InfoWindow({
content: this.popupContent,
maxWidth: 400
});
this.buildingMarker=new markerObject(this.buildingLat,this.buildingLong,this.buildingName,areaMap);
this.location=latValue.toString()+":"+longValue.toString();
this.setBuildingMarker=initBuildingMarker;
this.map=areaMap;
this.getName=getBuildingName;
this.getID=getBuildingID;
this.setContent=setPopupContent;
this.getGoogleMarker=getGMarker;
this.getInfoWindow=getInfoWin;
this.getBuildingLocation=getLoc;
this.setBuildingMap=setMap;
this.createPopup=dataPopup;
}
function initBuildingMarker(){
var marker=new markerObject();
marker.setMarker(this.buildingLat,this.buildingLong,this.buildingName);
}
function getBuildingName(){
return this.buildingName;
}
function getBuildingID(){
return this.buildingID;
}
function setPopupContent (contentString){
this.popupContent=contentString;
this.infoWindow.setContent(this.popupContent);
}
function getGMarker(){
return this.buildingMarker.marker;
}
function getInfoWin(){
return this.infoWindow;
}
function getLoc(){
return this.location;
};
function setMap(){
var marker=this.getGoogleMarker();
var infoWindow=this.getInfoWindow();
var areaMap=this.map;
google.maps.event.addListener(marker, 'click', function() {infoWindow.open(areaMap, marker);}
);
};
function dataPopup(desc){
this.setContent(desc);
var marker=this.getGoogleMarker();
this.infoWindow.open(this.map,marker);
}
function createPopup(desc,infoWin,clickMarker) {
infoWin.setContent(desc);
infoWin.open(map,clickMarker);
}
function initialize() {
var MAPFILES_URL = "http://maps.gstatic.com/intl/en_us/mapfiles/";
mapOptions = {
center: new google.maps.LatLng(29.7211, -95.3473),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
clickIcon = new google.maps.MarkerImage(
MAPFILES_URL + 'dd-start.png',
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34)
);
shadow = new google.maps.MarkerImage(
MAPFILES_URL + "shadow50.png",
new google.maps.Size(37, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10,34)
);
building1=new buildingObject('Class and Business Building','CBB',29.721349, -95.340585,map);
building1.setBuildingMap();
setBuildings.push(building1);
building2=new buildingObject('A.D. Bruce Religion Center','ADB',29.719408, -95.345291,map);
building2.setBuildingMap();
setBuildings.push(building2);
building3=new buildingObject('Agnes Arnold Auditorium','AHA',29.722496, -95.343887,map);
building3.setBuildingMap();
setBuildings.push(building3);
building4=new buildingObject('Agnes Arnold Hall','AH',29.722206, -95.344116,map);
building4.setBuildingMap();
setBuildings.push(building4);
building5=new buildingObject('Alumni Center','ALUM',29.725874, -95.347328,map);
building5.setBuildingMap();
setBuildings.push(building5);
building6=new buildingObject('Athletic Center','ATH2',29.726187, -95.346481,map);
building6.setBuildingMap();
setBuildings.push(building6);
building7=new buildingObject('Athletics Batting Cage','BATC',29.727612, -95.346161,map);
building7.setBuildingMap();
setBuildings.push(building7);
building8=new buildingObject('Athletics Maintenance Building','AMB',29.727509, -95.345764,map);
building8.setBuildingMap();
setBuildings.push(building8);
building9=new buildingObject('Bates Law','BL',29.723936, -95.337906,map);
building9.setBuildingMap();
setBuildings.push(building9);
building10=new buildingObject('Bates Residence Hall','BH',29.718931, -95.346344,map);
building10.setBuildingMap();
setBuildings.push(building10);
building11=new buildingObject('Bayou Oaks Apartments','BOA',29.712778, -95.340736,map);
building11.setBuildingMap();
setBuildings.push(building11);
building12=new buildingObject('Biology Greenhouse','BG',29.721296, -95.344208,map);
building12.setBuildingMap();
setBuildings.push(building12);
building13=new buildingObject('Blaffer Art Museum','FA2',29.724745, -95.342804,map);
building13.setBuildingMap();
setBuildings.push(building13);
building14=new buildingObject('Burdette Keeland Jr. Design & Exploration Center','BKD',29.724739, -95.340546,map);
building14.setBuildingMap();
setBuildings.push(building14);
building15=new buildingObject('Calhoun Lofts Apartments','CLA',29.722198, -95.33857,map);
building15.setBuildingMap();
setBuildings.push(building15);
building16=new buildingObject('Cambridge Oaks Apartments','CO',29.71829, -95.350296,map);
building16.setBuildingMap();
setBuildings.push(building16);
building17=new buildingObject('Campus Recreation & Wellness Center','CRWC',29.717712, -95.338219,map);
building17.setBuildingMap();
setBuildings.push(building17);
building18=new buildingObject('Carl Lewis International Track & Field Complex','CLTF',29.72669, -95.348206,map);
building18.setBuildingMap();
setBuildings.push(building18);
building19=new buildingObject('Physical Plant Greenhouse','PHPG',29.713264, -95.348831,map);
building19.setBuildingMap();
setBuildings.push(building19);
building19=new buildingObject('College of Technology','T2',29.723358, -95.342636,map);
building19.setBuildingMap();
setBuildings.push(building20);
}
</script>
</head>
<body onload="initialize()">
<div id='change' class='fstquad'>
floor plans and camera data
<!--<img src="UHlogo.jpg" style="width:100%; height:90%" />-->
</div>
<div id='map_canvas' class='sndquad'>
<!--<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(".sndquad").html('<object style="width:100%; height:100%;" data="http://172.27.140.52/EmergencyPortal.php">');
</script>
-->
</div>
<div class='trdquad'>
<button type="button" id="target">
click here
</button>
door monitoring
<img src="UHlogo.jpg" style="width:100%; height:90%" />
</div>
<script>
$("#target").click(function() {
$("#change").html("<img src='floorplans/T2_2.jpg' style='width:90%; height:90%' />");
});
</script>
<div class='fthquad'>
camera view
<img src="UHlogo.jpg" style="width:100%; height:90%" />
</div>
</body>
</html>
在infowindow打开（"domready"事件触发）之前，信息窗口中的html不属于DOM
如果在信息窗口的domready事件的事件监听器中运行jQuery代码，则可以使用它：
google.maps.event.addListener(infowindow,"domready" function() {
$("#target").click(function() {
$("#change").html("<img src='floorplans/T2_2.jpg' style='width:100%; height:90%' />");
});
（假设infowindow是对有问题的google.maps.infowindow的引用）
相关文章：
- 创建一个类似链接的按钮，并通过Javascript函数打开一个新的弹出窗口
- 正在添加'X'按钮，在文本字段旁边使用javascript
- 多个单选按钮组相互干扰
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- 单击按钮后如何逐个调用分区，上一个分区将隐藏
- 如何在单击按钮时显示一个分区，同时隐藏另一个分区
- 使用javascript或JQuery在HTML中删除当前分区的按钮
- 如何在用户到达iframe分区末尾时显示操作按钮
- Jquery一般情况下，在“是/否”单选按钮中显示/隐藏分区内的分区
- 如何检查是否检查了分区中的所有单选按钮
- 如何在HTML分区的innerHTML部分中添加按钮
- Html按钮，可以在每个分区中加载/激发多个JS/按钮
- 如何在多分区中将鼠标悬停在按钮上
- 通过在另一个分区的谷歌地图信息窗口上单击按钮来更改分区的内容
- 按钮打印分区的HTML内容
- 查找最接近提交按钮的父分区的TD
- html分区中按钮的中心行
- 通过点击同一分区中的按钮来动态选择一个元素
- 滚动分区的按钮
