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

成功！（有点...）

终于让它工作了，但不是亚当建议的方式：

<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 回答
1

所以我认为这个问题现在被提升到了一个不同的层次：你如何引用一个 ajax 容器内的元素？

应该可以引用通过 AJAX 加载的元素——直到元素出现在屏幕上（所以不在页面加载时）。看起来 getMap() 触发了一切。（是对的吗？）

试试这个：将您拥有的内容作为地图选项卡的内联内容，并将其作为 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>
于 2008-09-19T12:45:14.483 回答
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 回答