Utilizzo di Google Maps in ColdFusion

StackOverflow https://stackoverflow.com/questions/80278

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&amp;v=2&amp;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.

È stato utile?

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&amp;v=2&amp;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&amp;v=2&amp;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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top