Utilizzo di Google Maps in ColdFusion
-
09-06-2019 - |
Domanda
Sto cercando di utilizzare l'API di Google Maps in un modello ColdFusion che è un contenitore cflayoutarea di tipo bordo.Tuttavia, la mappa semplicemente non viene visualizzata:
<cfif isdefined("url.lat")>
<cfset lat="#url.lat#">
<cfset lng="#url.lng#">
</cfif>
<head>
<script src= "http://maps.google.com/maps?file=api&v=2&key=xxxx" type="text/javascript">
function getMap(lat,lng){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var pt= new GLatLng(lat,lng);
map.setCenter(pt, 18,G_HYBRID_MAP);
map.addOverlay(new GMarker(pt));
}
}
</script>
</head>
<cfoutput>
<body onLoad="getMap(#lat#,#lng#)" onUnload="GUnload()">
Map:<br>
<div id="map_canvas" style="width: 500px; height: 300px"/>
</body>
</cfoutput>"
dove lat e lng sono le coordinate in formato gradi.decimale.Sono riuscito a risalire alla riga in cui GBrowserIsCompatible() in qualche modo non restituisce mai TRUE e quindi non è stata intrapresa alcuna ulteriore azione.
Se aperto separatamente il modello funziona perfettamente ma non quando viene aperto come contenitore cflalayoutarea.Qualcuno ha esperienza in questo?Qualsiasi suggerimento è molto apprezzato.
Lawrence
Utilizzando CF 8.01, Dreamweaver 8
Ho provato il tuo suggerimento ma continua a non funzionare;la mappa viene visualizzata solo quando il codice chiamante è in linea.Tuttavia, se questa pagina contenitore è stata richiamata da un altro div, la mappa scompare nuovamente.
Sospetto che questo problema sia legato al contenitore cflayout;Cercherò il documento Extjs per vedere se ci sono indizi per una soluzione.
Soluzione
Successo!(una specie di...)
Alla fine è riuscito a funzionare, ma non nel modo suggerito da Adam:
<script src= "http://maps.google.com/maps?file=api&v=2&key=xxxx" type="text/javascript"></script>
<script type="text/javascript">
getMap=function(lat,lng){
if (GBrowserIsCompatible()){
var map = new GMap2(document.getElementById("map_canvas"));
var pt = new GLatLng(lat,lng);
map.setCenter(pt, 18,G_HYBRID_MAP);
map.addOverlay(new GMarker(pt));
}
}
</script>
<cflayout name="testlayout" type="border">
<cflayoutarea name="left" position="left" size="250"/>
<cflayoutarea name="center" position="center">
<!--- sample hard-coded co-ordinates --->
<body onLoad="getMap(22.280161,114.185096)">
Map:<br />
<div id="map_canvas" style="width:500px; height: 300px"/>
</body>
</cflayoutarea>
<!--- <cflayoutarea name="center" position="center" source="map_content.cfm?lat=22.280161&lng=114.185096"/> --->
</cflayout>
Il tutto deve essere contenuto nello stesso file altrimenti non funzionerebbe.Il mio sospetto è che la funzione getElementByID, così com'è, non possa fare riferimento a un elemento esterno al proprio file.Se il div è in un altro file (come nell'esempio di Adam), il risultato è una mappa indefinita, cioè viene creato un oggetto mappa ma senza nulla al suo interno.
Quindi penso che questa domanda sia ora elevata a un livello diverso:come si fa a fare riferimento a un elemento che si trova all'interno di un contenitore Ajax?
Altri suggerimenti
Quindi penso che questa domanda sia ora elevata a un livello diverso:come si fa a fare riferimento a un elemento che si trova all'interno di un contenitore Ajax?
Dovrebbe essere possibile fare riferimento a un elemento caricato tramite AJAX, ma non finché l'elemento non è sullo schermo (quindi non al caricamento della pagina).Sembra che getMap() attivi tutto.(È giusto?)
Prova questo:Prendi esattamente quello che hai come contenuto in linea per la scheda della mappa e rendilo il contenuto di map_content.cfm; Poi invece di utilizzare body onload per attivare l'evento, scrivilo in linea, dopo aver definito il div:
<body>
Map:<br />
<div id="map_canvas" style="width:500px; height: 300px"/>
<script type="text/javascript">
getMap(22.280161,114.185096);
</script>
</body>
Forse l'area di layout non ha il diritto stile.Penso che potresti dover dare a map_canvas a
position: absolute
O
position: relative
E' solo un'intuizione.
CFLayoutArea è un nuovo tag AJAX aggiunto con ColdFusion versione 8.(Oltre ai tag come CFWindow, CFDiv, ecc.)
All'interno del contenuto caricato AJAX di uno qualsiasi di questi nuovi tag, è necessario includere JavaScript esterno dalla pagina che lo contiene.Nel tuo caso, quella sarebbe la pagina che include il tag <cflayout>.
Prova qualcosa del genere:
in index.cfm (o qualunque sia il file che lo contiene):
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxx" type="text/javascript">
function getMap(lat,lng){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var pt= new GLatLng(lat,lng);
map.setCenter(pt, 18,G_HYBRID_MAP);
map.addOverlay(new GMarker(pt));
}
}
</script>
<cflayout>...</cflayout>
map.cfm (contenuto della scheda CFLayout della mappa):
<cfif structKeyExists(url, "lat")>
<cfset variables.lat = url.lat />
<cfset variables.lng = url.lng />
</cfif>
<head></head>
<cfoutput>
<body onLoad="getMap(#variables.lat#,#variables.lng#)" onUnload="GUnload()">
Map:<br>
<div id="map_canvas" style="width: 500px; height: 300px"/>
</body>
</cfoutput>