Fatal编程技术网
  • javascript/
  • Javascript 通过单击另一个分区的google maps信息窗口上的按钮来更改分区的内容

Javascript 通过单击另一个分区的google maps信息窗口上的按钮来更改分区的内容

javascript jquery html google-maps web

Javascript 通过单击另一个分区的google maps信息窗口上的按钮来更改分区的内容,javascript,jquery,html,google-maps,web,Javascript,Jquery,Html,Google Maps,Web,我有一个分为多个部分的网页 一个部门有一张使用谷歌地图api的地图。。地图上有标记。。 当我点击标记时，一个信息窗口打开 现在，我试图在信息窗口上放置一个按钮，单击该按钮将更改 我的html页面中存在另一个分区的内容 我使用类似这样的东西用jquery进行了尝试 <script> $("#target").click(function() { $("#change").html("<img src='floorplans/T2_2.jpg' style='width:100%;

我有一个分为多个部分的网页

一个部门有一张使用谷歌地图api的地图。。地图上有标记。。 当我点击标记时，一个信息窗口打开

现在，我试图在信息窗口上放置一个按钮，单击该按钮将更改 我的html页面中存在另一个分区的内容

我使用类似这样的东西用jquery进行了尝试

<script>
$("#target").click(function() {
$("#change").html("<img src='floorplans/T2_2.jpg' style='width:100%; height:90%' />");
});
</script>


$（“#目标”）。单击（函数（）{
$（“#更改”）.html（“”）；
});
但是，当web页面上出现id为目标的按钮时，这种方法可以正常工作。。但当我把它放在信息窗口时，它就不起作用了

我的google maps脚本显示一个按钮，如下所示：

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;
}

函数setContentString（buildingName，buildingID）{
var content=''+buildingName+'点击更改'；
返回内容；
}
有谁能帮我解决这个问题吗

更新：

我的网页代码：

<!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>


休士顿大学电磁脉冲
//
var-map=null；
var-mapOptions=null；
var clickIcon=null；
var shadow=null；
var信息窗口；
var构建1；
var setBuildings=新数组（）；
函数标记对象（latValue、longValue、buildingName、map）{
this.marker=new google.maps.marker({
职位：新google.maps.LatLng（latValue，longValue），
地图：地图，
标题：buildingName
});
}
函数createStringLocation（latValue、longValue）{
var stringLocation=latValue.toString（）+“：”+longValue.toString（）；
返回位置；
}
函数setContentString（buildingName，buildingID）{
var content=''+buildingName+'点击更改'；
返回内容；
}
函数buildingObject（buildingName、buildingID、latValue、longValue、areaMap）{
this.buildingID=buildingID；
this.buildingLat=latValue；
这个.buildingLong=longValue；
this.buildingName=buildingName；
this.popupContent=setContentString（this.buildingName，this.buildingID）；
this.infoWindow=new google.maps.infoWindow({
content:this.popupContent，
最大宽度：400
});
this.buildingMarker=新标记对象（this.buildingLat、this.buildingLong、this.buildingName、areaMap）；
this.location=latValue.toString（）+“：”+longValue.toString（）；
this.setBuildingMarker=initBuildingMarker；
this.map=区域地图；
this.getName=getBuildingName；
this.getID=getBuildingID；
this.setContent=setPopupContent；
getGoogleMarker=getGMarker；
this.getInfoWindow=getInfoWin；
getBuildingLocation=getLoc；
this.setBuildingMap=setMap；
this.createPopup=dataPopup；
}
函数initBuildingMarker（）{
var marker=新的marker对象（）；
marker.setMarker（this.buildingLat、this.buildingLong、this.buildingName）；
}
函数getBuildingName（）{
返回此.buildingName；
}
函数getBuildingID（）{
返回此.buildingID；
}
函数setPopupContent（contentString）{
this.popupContent=contentString；
this.infoWindow.setContent（this.popupContent）；
}
函数getGMarker（）{
返回this.buildingMarker.marker；
}
函数getInfoWin（）{
返回此.infoWindow；
}
函数getLoc（）{
返回此位置；
};
函数setMap（）{
var marker=this.getGoogleMarker（）；
var infoWindow=this.getInfoWindow（）；
var areaMap=this.map；
google.maps.event.addListener（标记，'click'，function（）{infoWindow.open（aremap，marker）；}
);
};
功能数据弹出（描述）{
此.setContent（desc）；
var marker=this.getGoogleMarker（）；
this.infoWindow.open（this.map，marker）；
}
函数createPopup（描述、信息赢、点击标记）{
infoWin.setContent（desc）；
打开（地图，点击标记）；
}
函数初始化（）{
var MAPFILES_URL=”http://maps.gstatic.com/intl/en_us/mapfiles/";
映射选项={
中心：新google.maps.LatLng（29.7211，-95.3473），
缩放：16，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
clickIcon=new google.maps.MarkerImage(
MAPFILES_URL+“dd start.png”，
新谷歌地图大小（20,34），
新的google.maps.Point（0,0），
新谷歌地图点（10,34）
);
shadow=new google.maps.MarkerImage(
MAPFILES_URL+“shadow50.png”，
新谷歌地图尺寸（37,34），
新的google.maps.Point（0,0），
新谷歌地图点（10,34）
);
building1=新建筑对象（“阶级和商业建筑”，“CBB”，29.721349，-95.340585，地图）；
building1.setBuildingMap（）；
setBuildings.push（building1）；
building2=新建筑对象（“公元布鲁斯宗教中心”，“亚洲开发银行”，29.719408，-95.345291，地图）；
building2.setBuildingMap（）；
setBuildings.push（building2）；
building3=新建筑对象（“阿格尼丝·阿诺德礼堂”，“AHA”，29.722496，-95.343887，地图）；
building3.setBuildingMap（）；
setBuildings.push（building3）；
building4=新建筑对象（“阿格尼丝·阿诺德大厅”，“啊”，29.722206，-95.344116，地图）；
building4.setBuildingMap（）；
setBuildings.push（building4）；
building5=新建筑对象（“校友中心”，“校友”，29.725874，-95.347328，地图）；
building5.setBuildingMap（）；
setBuildings.push（building5）；
building6=新建筑对象（“运动中心”，“雅典2”，29.726187，-95.346481，地图）；
building6.setBuildingMap（）；
setBuildings.push（building6）；
building7=新建筑对象（“田径击球笼”，“BATC”，29.727612，-95.346161，地图）；
building7.setBuildingMap（）；
setBuildings.push（building7）；
building8=新建筑对象（“体育维护大楼”，“AMB”，29.727509，-95.345764，地图）；
building8.setBuildingMap（）；
setBuildings.push（building8）；
building9=新建筑对象（“贝茨定律”，“BL”，29.723936，-95.337906，地图）；
building9.setBuildingMap（）；
设置建筑物。推（建筑物9）；
building10=新建筑对象（“贝茨住宅大厅”，“伯克希尔哈撒韦”，29.718931，-95.346344，地图）；
建筑

google.maps.event.addListener(infowindow,"domready" function() {
  $("#target").click(function() {
  $("#change").html("<img src='floorplans/T2_2.jpg' style='width:100%; height:90%' />");
});