2013-10-23 133 views
1

早上,希望有人可以幫忙。我有一個谷歌地圖設置,打開地圖上的標記信息窗口中的火車時間。這工作正常,我只需要該信息窗口不能在地圖上打開,但在一個單獨的標籤。代碼如下谷歌地圖infowindow打開文章

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

我只需要在信息窗口中的信息開放。有任何想法嗎 ?

感謝

回答

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>"; 
+0

好極了,我一直都搞亂了好久了,它是如此簡單。非常感謝 ! – Coco