問題討論區


【JavaScript 語法】問題討論區


【問題】 js的物件寫法問題



js的物件寫法問題
會員三級
註冊日期:
2008/10/4 20:31
留言: 30
可以請老師幫我看看我的寫法哪裡錯誤嗎
map是我原本的寫法,G是改成物件
執行G的時候
initialize的function有成功跑出來
但是show_address和get_address會出現錯誤
使用物件時
我是以G.show_address的方式呼叫
是我寫法出錯了嗎@@?

map.js

var map,geocoder,marker;

    function
initialize() {
    
//測試瀏覽器是否支援Google Maps API
        
if (GBrowserIsCompatible()) {
       
map = new GMap2(document.getElementById("map_canvas"));
       
map.enableContinuousZoom();
       
map.setCenter(new GLatLng(22.9839392, 120.208356), 13);
       
geocoder = new GClientGeocoder();
       
geocoder.setBaseCountryCode("TW");
            
       
map.addControl(gl = new GLargeMapControl());
       
map.addControl(gsc = new GScaleControl());
       
map.addControl(gmt = new GMapTypeControl());
       
map.addControl(gom = new GOverviewMapControl());
       
map.checkResize();
        }
    }
    
    
//將輸入位置顯示在地圖上
    
function show_address() {

        
address = document.getElementById("address").value;
        
map.clearOverlays();
        
        if (
geocoder) {
        
//對地址進行解析座標的動作
            
geocoder.getLatLng( address,
                
//callback函式
           
function(latlng) {
                    if (!
latlng) {
              
window.alert("找不到 " + address);
          }
          else {
              
map.setCenter(latlng, 15);
              
marker  = new GMarker(latlng,{draggable:true});
              
marker.enableDragging();
              
map.addOverlay(marker);
              
GEvent.addListener(marker, "dragend", get_address);
          }
           }
            );
        }
    }
    
    
//當移動GMarker時,將座標轉呈遞紙顯示在address欄裡
    
function get_address(){
        
geocoder.getLocations( marker.getLatLng(), function(address) {
            if(
address.Status.code != 200) {
           
alert("此座標沒有找到對應的地址 " + marker.getLatLng());
       }
       else {
           var
result = address.Placemark[0];
           
document.getElementById("address").value = result.address;
       }
        });
    }


G.js

var G = {
    
map:null,
    
geocoder:null,
    
marker:null,
    
    
//map初始化
    
initialize:function() {
        
        if (
GBrowserIsCompatible()) {
            
this.map = new GMap2(document.getElementById("map_canvas"));
       
this.map.enableContinuousZoom();
       
this.map.setCenter(new GLatLng(22.9839392, 120.208356), 13);
       
this.geocoder = new GClientGeocoder();
       
this.geocoder.setBaseCountryCode("TW");
            
       
this.map.addControl(gl = new GLargeMapControl());
       
this.map.addControl(gsc = new GScaleControl());
       
this.map.addControl(gmt = new GMapTypeControl());
       
this.map.addControl(gom = new GOverviewMapControl());
       
this.map.checkResize();
        }
    },
    
    
//顯示輸入位置
    
show_address:function() {
    
        var
address = document.getElementById("address").value;
        
this.map.clearOverlays();
    
        if (
this.geocoder) {
            
this.geocoder.getLatLng( address, function(latlng) {
                if (!
latlng) {
               
window.alert("找不到 " + address);
           }
           else {
               
this.map.setCenter(latlng, 15);
                  
this.marker = new GMarker(latlng, {draggable:true});
               
this.marker.enableDragging();
               
this.map.addOverlay(this.marker);
               
GEvent.addListener(this.marker, "dragend", this.get_address);
           }
            });
        }
    },
    
    
//抓取移動GMarker的座標並轉成住址
    
get_address:function() {
        var
result;
    
        
this.geocoder.getLocations( this.marker.getLatLng(), function(address) {
            if(
address.Status.code != 200) {
           
alert("此座標沒有找到對應的地址 " + this.marker.getLatLng());
       }
       else {
           
result = address.Placemark[0];
           
document.getElementById("address").value = result.address;
       }
        });
    }

};

2009/8/17 16:23
 


回覆: js的物件寫法問題
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
您好:

下次最好是還能附個範例...不然我還要再去把html給生出來XD

試試...

var G = {
    
map:null,
    
geocoder:null,
    
marker:null,
        
    
//map初始化
    
initialize:function() {
        if (
GBrowserIsCompatible()) {
            
this.map = new GMap2(document.getElementById("map_canvas"));
            
this.map.enableContinuousZoom();
            
this.map.setCenter(new GLatLng(22.9839392, 120.208356), 13);
            
this.geocoder = new GClientGeocoder();
            
this.geocoder.setBaseCountryCode("TW");
                    
            
this.map.addControl(gl = new GLargeMapControl());
            
this.map.addControl(gsc = new GScaleControl());
            
this.map.addControl(gmt = new GMapTypeControl());
            
this.map.addControl(gom = new GOverviewMapControl());
            
this.map.checkResize();
        }
    },
        
    
//顯示輸入位置
    
show_address:function() {
        var
_this = this;
        var
address = document.getElementById("address").value;
        
this.map.clearOverlays();
        
        if (
this.geocoder) {
            
this.geocoder.getLatLng( address, function(latlng) {
                if (!
latlng) {
                    
window.alert("找不到 " + address);
                } else {
                    
_this.map.setCenter(latlng, 15);
                    
_this.marker = new GMarker(latlng, {draggable:true});
                    
_this.marker.enableDragging();
                    
_this.map.addOverlay(_this.marker);
                    
GEvent.addListener(_this.marker, "dragend", _this.get_address);
                }
            });
        }
    },
        
    
//抓取移動GMarker的座標並轉成住址
    
get_address:function() {
        var
_this = this;
        var
result;
        
        
this.geocoder.getLocations( _this.marker.getLatLng(), function(address) {
            if(
address.Status.code != 200) {
                
alert("此座標沒有找到對應的地址 " + _this.marker.getLatLng());
            } else {
                
result = address.Placemark[0];
                
document.getElementById("address").value = result.address;
            }
        });
    }
};

2009/8/18 10:00
 


回覆: 回覆: js的物件寫法問題
會員三級
註冊日期:
2008/10/4 20:31
留言: 30
沒附上範例是我設想不周
真不好意思
雖然晚了點
但還是把範例上傳供大家分享

關於G.js的問題
我已經改成老師的寫法
show_address的收尋功能已順利執行
但定位圖樣的拖曳功能變得怪怪的會卡住
結果就無法執行get_address的function

另外想請問
要加這一段程式

var _this = this;

是因為我的function裡還有另一個function的關係嗎?

附件:


zip google.zip 大小: 121.42 KB; 下載次數: 394

2009/8/18 12:39
 


回覆: 回覆: 回覆: js的物件寫法問題
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
您好:


抱歉這麼晚回覆!


因為函式執行時, this 會視目前的區域而表示不同的物件
當呼叫 show_address() 時,又使用到 G 的其它物件的函式..
因此在其中的 this 就不是 G, 所以又要使用 G 的 map 時就會出錯

2009/8/20 8:57
 


回覆: 回覆: 回覆: 回覆: js的物件寫法問題
會員三級
註冊日期:
2008/10/4 20:31
留言: 30
ㄜ...感覺好像有那麼一點懂,但還是不太明瞭...
對不起,學生我太愚鈍了
人笨就算了,物件導向的概念還沒學好..


老師,我還面臨一個問題
就是
在執行show_address()後
如果拖曳地圖上的浮標
會出現錯誤而無法繼續執行的情形
請問應該如何解決呢?

2009/8/20 20:10
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS