在 ColdFusion 中使用 Google 地图

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

题

我正在尝试在 ColdFusion 模板中使用 Google 地图 API，该模板是边框类型 cflayoutarea 容器。但是，地图根本不显示：

<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 文档，看看是否有任何解决方案。

有帮助吗？

解决方案

成功！（有点...）

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

<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 的 exmaple 中），则会导致未定义的映射，即创建了一个映射对象，但其中没有任何内容。

所以我认为这个问题现在提升到了一个不同的层面：如何引用 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&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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top