在ColdFusion中使用Google地图
我正在尝试在ColdFusion模板(边界类型为cflayoutarea容器)中使用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是度数/小数格式的坐标。我已经追溯到GBrowserIsCompatible()永远不会返回TRUE的那一行，因此没有采取进一步的措施。
如果单独打开，则模板可以完美工作，但作为cflayoutarea容器打开时则不能正常工作。任何人都有经验吗？任何建议，不胜感激。
劳伦斯
使用CF 8.01，Dreamweaver 8
尝试过建议，但仍然无效；该地图仅在调用代码为内联时显示。但是，如果从另一个div调用了此容器页面，则地图将再次消失。
我怀疑此问题与cflayout容器有关；我将查找Extjs文档，看是否有解决方案的线索。
解决方案
回答
也许布局区域没有正确的样式。我认为我们可能必须给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>
回答
成功！ (有点...)
终于使它工作了，但不是亚当建议的那样：
<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在另一个文件中(如Adam的示例)，则将导致未定义的地图，即创建了地图对象，但其中没有任何内容。
因此，我认为这个问题现在已经提升到另一个层次：如何引用ajax容器中的元素？
回答
So I think this question is now elevated to a different level: how do you reference an element that is inside an ajax container?
应该可以引用通过AJAX加载的元素-直到该元素出现在屏幕上(这样才加载页面)。看起来getMap()会触发所有操作。 (是对的吗？)
尝试以下操作：完全将我们所拥有的内容作为map选项卡的内联内容，并使其成为map_content.cfm的内容；然后在定义div之后，而不是使用body onload来触发事件，而是将其内联写入：
<body>
Map:<br />
<div id="map_canvas" style="width:500px; height: 300px"/>
<script type="text/javascript">
getMap(22.280161,114.185096);
</script>
</body>
