استخدام خرائط جوجل في ColdFusion

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

سؤال

أحاول استخدام Google Maps API في قالب 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

جربت اقتراحك ولكن لا يزال لا يعمل؛تظهر الخريطة فقط عندما يكون رمز الاتصال مضمنًا.ومع ذلك، إذا تم استدعاء صفحة الحاوية هذه من قسم آخر، فستختفي الخريطة مرة أخرى.

أظن أن هذه المشكلة مرتبطة بحاوية 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)، فإنه يؤدي إلى خريطة غير محددة، أي أنه يتم إنشاء كائن خريطة ولكن بدون أي شيء فيه.

لذلك أعتقد أن هذا السؤال قد تم رفعه الآن إلى مستوى مختلف:كيف يمكنك الرجوع إلى عنصر موجود داخل حاوية اياكس؟

نصائح أخرى

لذلك أعتقد أن هذا السؤال قد تم رفعه الآن إلى مستوى مختلف:كيف يمكنك الرجوع إلى عنصر موجود داخل حاوية اياكس؟

يجب أن يكون من الممكن الإشارة إلى عنصر تم تحميله عبر 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 a

position: absolute

أو 

position: relative

هذا مجرد حدس.

CFLayoutArea هي علامة AJAX جديدة تمت إضافتها مع الإصدار 8 من ColdFusion.(بالإضافة إلى علامات مثل 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