2008-09-17 4 views
1

Я пытаюсь использовать API Карт Google в шаблоне ColdFusion, который является контейнером cflayoutarea типа границы. Однако карта просто не показывает вверх:Использование Google Maps в ColdFusion

<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, чтобы узнать, есть ли какие-либо решения для решения.

ответ

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 находится в другом файле (как в примере с Адамом), это приводит к неопределенной карте, т. Е. Создается объект карты, но в нем ничего нет.

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

+0

Ну получается, что проблема не имеет ничего общего с JS, но странность с ColdFusion.navigate; если вы используете ColdFusion.navigate для указания на .cfm, который вызывает карту google, карта не будет отображаться (но если вы вызовете файл карты, он отлично работает.) – lawrencem49 2009-02-25 08:12:11

0

Возможно, площадь макета не имеет стиль. Я думаю, что вы, возможно, придется дать map_canvas

position: absolute 

или

position: relative 

Это только догадка.

0

CFLayoutArea это новый АЯКС тег добавлен с ColdFusion версии 8. (В дополнение к тэгам, как CFWindow, CFDiv и т.д.)

В АЯКС-загруженного содержимого любого из этих новых тегов, внешний 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> 
1

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

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

Попробуйте это: возьмите именно то, что у вас есть в качестве встроенного контента для вкладки карты, и сделайте его содержимым map_content.cfm; затем вместо того, чтобы использовать OnLoad тела, чтобы запустить событие, записать его рядный, после ДИВ определяется:

<body> 
    Map:<br /> 
    <div id="map_canvas" style="width:500px; height: 300px"/> 
    <script type="text/javascript"> 
     getMap(22.280161,114.185096); 
    </script> 
</body>