ColdFusion での Google マップの使用
https://stackoverflow.com/questions/80278
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
ボーダータイプの 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&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>"
ここで、lat と lng は、degree.Decimal 形式の座標です。GBrowserIsCompatibility() がどういうわけか TRUE を返さない行まで追跡したため、それ以上のアクションは実行されませんでした。
テンプレートを個別に開いた場合は完全に機能しますが、cflayoutarea コンテナーとして開いた場合は機能しません。これについて経験のある人はいますか？ご提案をお待ちしております。
ローレンス
CF 8.01、Dreamweaver 8 の使用
あなたの提案を試しましたが、まだ機能しません。マップは、呼び出しコードがインラインの場合にのみ表示されます。ただし、このコンテナ ページがさらに別の div から呼び出された場合、マップは再び消えます。
この問題は cflayout コンテナに関連していると思われます。Extjs ドキュメントを調べて、解決策への手がかりがあるかどうかを確認します。
解決
成功！(なんだか...)
ようやく機能するようになりましたが、アダムが提案した方法ではありませんでした。
<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>
すべてを同じファイル内に含める必要があります。そうしないと機能しません。私の疑問は、現状では getElementByID 関数はそれ自体のファイルの外部にある要素を参照できないのではないかということです。div が別のファイルにある場合 (アダムの例のように)、未定義のマップが生成されます。つまり、マップ オブジェクトが作成されますが、その中には何もありません。
したがって、この質問は別のレベルに引き上げられていると思います。Ajaxコンテナ内の要素を参照するにはどうすればよいですか?
他のヒント
したがって、この質問は別のレベルに引き上げられていると思います。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>
レイアウト領域が適切ではない可能性があります スタイル. 。map_canvas に
position: absolute
または
position: relative
それは単なる予感です。
CFLayoutArea は、ColdFusion バージョン 8 で追加された新しい AJAX タグです。(CFWindow、CFDiv などのタグに加えて)
これらの新しいタグの AJAX で読み込まれたコンテンツ内には、それを含むページから外部 JavaScript を含める必要があります。あなたの場合、それは <cflayout> タグが含まれるページになります。
次のようなことを試してください。
Index.cfm (またはそれを含むファイル):
<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 (マップの [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>
