1

ボーダー タイプの cflayoutarea コンテナである ColdFusion テンプレートで Google Maps API を使用しようとしています。ただし、マップは単に表示されません。

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

ここで、lat と lng は、degree.decimal 形式の座標です。GBrowserIsCompatible() が何らかの形で TRUE を返さない行までたどったため、それ以上のアクションは実行されませんでした。

個別に開いた場合、テンプレートは完全に機能しますが、cflayoutarea コンテナーとして開いた場合は機能しません。誰でもこれの経験がありますか？どんな提案でも大歓迎です。

ローレンス

CF 8.01、Dreamweaver 8 を使用

あなたの提案を試してみましたが、まだうまくいきません; マップは、呼び出しコードがインラインの場合にのみ表示されます。ただし、このコンテナー ページがさらに別の div から呼び出された場合、マップは再び表示されなくなります。

この問題は、cflayout コンテナーに関連していると思われます。Extjs のドキュメントを調べて、解決策があるかどうかを確認します。

4

4 に答える 4

1

ですから、この質問は今では別のレベルに引き上げられていると思います。ajaxコンテナー内にある要素をどのように参照しますか？

AJAXを介してロードされた要素を参照できるはずです-要素が画面に表示されるまで（ページのロードではない）だけです。getMap（）がすべてをトリガーするようです。（そうですか？）

これを試してください：マップタブのインラインコンテンツとして持っているものを正確に取得し、それをmap_content.cfmのコンテンツにします。次に、body onloadを使用してイベントを発生させる代わりに、divが定義された後、インラインで書き込みます。

<body>
    Map:<br />
    <div id="map_canvas" style="width:500px; height: 300px"/>
    <script type="text/javascript">
        getMap(22.280161,114.185096);
    </script>
</body>
于 2008-09-19T12:45:14.483 に答える
1

成功！（ちょっと…）

最終的に機能するようになりましたが、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>

すべてが同じファイル内に含まれている必要があります。そうしないと、機能しません。私の疑いでは、getElementByID 関数はそのままでは、独自のファイルの外部にある要素を参照できないということです。div が別のファイルにある場合 (Adam の例のように)、未定義のマップになります。つまり、マップ オブジェクトが作成されますが、何もありません。

したがって、この質問は別のレベルに引き上げられたと思います: ajax コンテナー内にある要素をどのように参照しますか?

于 2008-09-19T08:08:31.973 に答える
0

レイアウト領域のスタイルが適切でない可能性があります。map_canvasに

position: absolute

また

position: relative

それはただの予感です。

于 2008-09-17T05:29:02.593 に答える
0

CFLayoutAreaは、ColdFusionバージョン8で追加された新しいAJAXタグです（CFWindow、CFDivなどのタグに加えて）

これらの新しいタグのいずれかのAJAXでロードされたコンテンツ内に、含まれているページから外部JavaScriptを含める必要があります。あなたの場合、それは<cflayout>タグを含むページになります。

次のようなものを試してください。

index.cfm（または含まれているファイルが何であれ）：

<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（マップの[CFLayout]タブのコンテンツ）：

<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>
于 2008-09-17T13:01:45.530 に答える