1

早上好,希望有人能帮忙。我设置了一个谷歌地图,可以在地图上标记的信息窗口中打开火车时间。效果很好,我只需要该信息窗口不在地图中打开,而是在单独的标签中打开。代码如下

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,400,600,800' rel='stylesheet' type='text/css'>
<!--Force IE standards mode-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />


<link rel="stylesheet" type="text/css" media="(min-width: 0px)" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" media="(min-width: 0px)" href="styles/desktoptrain.css" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<!--http://www.google.com/webfonts#ChoosePlace:select Example of Web Font Link-->
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<!--Jquery core-->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
/*FORCE IE to see placeholder attribute within an INPUT element*/

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function() {
   jQuery.support.placeholder = false;
   test = document.createElement('input');
   if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it. 
$(function() {
   if(!$.support.placeholder) { 
      var active = document.activeElement;
      $(':text').focus(function () {
         if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
         }
      }).blur(function () {
         if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
         }
      });
      $(':text').blur();
      $(active).focus();
      $('form:eq(0)').submit(function () {
         $(':text.hasPlaceholder').val('');
      });
   }
});
</script>
<title>Connect Tees Valley - Live Train Information</title>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="gmap_funcs.js"></script>
<script type="text/javascript" src="stations.js"></script>
<script id="api" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAN6152UgwT1SZB77BnJFoIRQnpdVsAwV_3Y4Ls0Av3kK1zTyTjBRRnBT3FSsVW5r9XsYVmbKrObSkbg" type="text/javascript"></script>
<script src="gmap_jscoord-1.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
<!--//

var container;
var map;
var marker;

function initMap(){
    container = document.getElementById("map_canvas");
    map = new GMap2(container);
    map.setCenter(new GLatLng(54.57019583004256,-1.3190460205078125), 9);
    map.addControl(new GMapTypeControl());
    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    updateMapControls();
}

function updateControls(){
    var images = map.getContainer().getElementsByTagName("img");
    for(var i=0; i<images.length; i++){
        images[i].src = images[i].src.replace(/mapcontrols2/,"mapcontrols3d");
    }
}
function getRailStation(stationIndex){
    var pt = OS2LatLonWGS84_func(stationListArr[stationIndex].east,stationListArr[stationIndex].north)
    pt = new GLatLng(pt.lat, pt.lng)
    map.setCenter(pt, 14);
    marker = createrMarker_func(pt,'');
    map.addOverlay(marker);
    marker.stationIndex = stationIndex;

    ajaxLoadLiveRailInfo(stationListArr[stationIndex].code) ;
}

var railwayMarker;
function createrMarker_func(latlngPt,iconSrc){
    var marker = new GMarker(latlngPt, {draggable: false});
    if (railwayMarker != undefined){
        railwayMarker.remove();
    }
    railwayMarker = marker;
    return marker;
}
//-->
</script>
<script type="text/javascript">
<!--//
function ajaxLoadLiveRailInfo(stationCode){
    if (stationCode != ""){
        var arrdep = "departures";
        sendXmlHttpRequestGet("nationalrailwebservice/?stationcode="+stationCode+"&arrdep="+arrdep+"&showplat=0",ajaxLoadLiveRailInfoRes,"",null);
    }
}

function ajaxLoadLiveRailInfoRes(res){
    var stationIndex = marker.stationIndex;

    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml("<div class='mapbubbletitle'>"+stationListArr[stationIndex].name+" Station</div><div class='raillivefeed'>"+res+"</div><div class='clear'></div><div class='mapbubblebody'><img src='images/poweredbynr.gif' alt='Railway Station' title='National Rail'><br /><a href='http://nationalrail.co.uk/stations/"+stationListArr[stationIndex].code+"/details.html' target='_blank'>More information on "+stationListArr[stationIndex].name+" Station </a><br />Plan a local journey <a href=\"javascript:gotoJPlanner('"+stationListArr[stationIndex].name+" rail station','')\">from</a> / <a href=\"javascript:gotoJPlanner('','"+stationListArr[stationIndex].name+" rail station')\">to</a> "+stationListArr[stationIndex].name+" Station<br /><a href='http://www.nationalrail.co.uk/times_fares/' target='_blank'>Fare and timetable information</a></div>");
    });


    marker.openInfoWindowHtml("<div class='mapbubbletitle'>"+stationListArr[stationIndex].name+" Station</div><div class='raillivefeed'>"+res+"</div><div class='clear'></div><div class='mapbubblebody'><img src='images/poweredbynr.gif' alt='Railway Station' title='National Rail'><br /><a href='http://nationalrail.co.uk/stations/"+stationListArr[stationIndex].code+"/details.html' target='_blank'>More information on "+stationListArr[stationIndex].name+" Station </a><br />Plan a local journey <a href=\"javascript:gotoJPlanner('"+stationListArr[stationIndex].name+" rail station','')\">from</a> / <a href=\"javascript:gotoJPlanner('','"+stationListArr[stationIndex].name+" rail station')\">to</a> "+stationListArr[stationIndex].name+" Station<br /><a href='http://www.nationalrail.co.uk/times_fares/' target='_blank'>Fare and timetable information</a></div>");

}


</script>
<script type="text/javascript">

var navImgHoverArr = ['images/button__myjourney.jpg','images/button__bus.jpg','images/button__rail.jpg','images/button__walk.jpg','images/button__cycle.jpg','images/button__air.jpg','images/button__drive.jpg','images/button__taxi.jpg'];
//-->
</script>
<!--Google Analytics Tracking Snippet - 15 November 2012-->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-11278574-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol
     ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body onLoad="initNav();initMap()" class="pgrail">


<section id="mainSection">
    <h2>To get live departure information from any  station<br />
    select from the drop-down list below.</h2>  

<article id="trainLive">
                      <select name="stationlist" id="stationlist" onChange="getRailStation(this.value)" class="inputtxt">
                        <option>***Please select station***</option>
                        <option value="0">Allens West</option>
                        <option value="1">Battersby</option>
                        <option value="2">Billingham</option>
                        <option value="3">Bishop Auckland</option>
                        <option value="4">Castleton Moor</option>
                        <option value="5">Chester-le-Street</option>
                        <option value="6">Commondale</option>
                        <option value="22">Longbeck</option>

                    </select>
                    <div id="map_canvas">Map loading..</div>
</article>


<article id="infowin">
info window
</article>
</section>

</body>
</html>

工作代码可以在这里找到http://www.connectteesvalley.com/traindepartures1.asp

我只需要在信息窗口框中打开信息。有任何想法吗 ?

谢谢

4

1 回答 1

1

ajaxLoadLiveRailInfoRes函数中而不是调用marker.openInfoWindowHTML中执行以下操作:

    document.getElementById("infowin").innerHTML = "<div class='mapbubbletitle'>"+stationListArr[stationIndex].name+" Station</div><div class='raillivefeed'>"+res+"</div><div class='clear'></div><div class='mapbubblebody'><img src='images/poweredbynr.gif' alt='Railway Station' title='National Rail'><br /><a href='http://nationalrail.co.uk/stations/"+stationListArr[stationIndex].code+"/details.html' target='_blank'>More information on "+stationListArr[stationIndex].name+" Station </a><br />Plan a local journey <a href=\"javascript:gotoJPlanner('"+stationListArr[stationIndex].name+" rail station','')\">from</a> / <a href=\"javascript:gotoJPlanner('','"+stationListArr[stationIndex].name+" rail station')\">to</a> "+stationListArr[stationIndex].name+" Station<br /><a href='http://www.nationalrail.co.uk/times_fares/' target='_blank'>Fare and timetable information</a></div>";
于 2013-10-23T08:50:08.947 回答