Использование Карт Google в ColdFusion

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

Вопрос

Я пытаюсь использовать API Карт Google в шаблоне ColdFusion, который представляет собой контейнер 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 — координаты в формате «градус.десятичный».Я проследил до строки, где 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 находится в другом файле (как в примере Адама), это приводит к неопределенной карте, т. е. создается объект карты, но в нем ничего нет.

Поэтому я думаю, что этот вопрос теперь поднят на другой уровень:как ссылаться на элемент, находящийся внутри контейнера ajax?

Другие советы

Поэтому я думаю, что этот вопрос теперь поднят на другой уровень:как ссылаться на элемент, находящийся внутри контейнера ajax?

Должна быть возможна ссылка на элемент, загруженный через AJAX, но только до тех пор, пока элемент не появится на экране (то есть не при загрузке страницы).Похоже, что getMap() запускает все.(Это правильно?)

Попробуй это:Возьмите именно то, что у вас есть, в качестве встроенного содержимого для вкладки карты и сделайте его содержимым файла map_content.cfm; затем вместо того, чтобы использовать загрузку тела для запуска события, напишите его в строке после определения 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 — это новый тег AJAX, добавленный в ColdFusion версии 8.(Помимо таких тегов, как 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