2015-09-02 131 views
1

點擊事件地圖實現,但沒有hapens.I我使用MVC的ExtJS我知道如何在JavaScript例如http://jsfiddle.net/fatihacet/ckegk/簡單的點擊事件,但在ExtJS的,我應該把代碼來實現我在窗口gmappanel如何在地圖上標記controller.On點擊應該出現在place.I處理這已經閱讀文檔的發現google.maps.event.addListener但如何實現這一手柄click事件

Ext.define('App.view.App', { 
     extend: 'Ext.window.Window', 
     alias: 'widget.appform', 
     title:'', 
     operation:'', 
     resizable: false, 
     modal:true, 
     initComponent: function() { 
      me = this; 
      this.autoShow = true; 
      this.width = 550; 
      this.height = 650; 
      this.items = [ 
       { 
        xtype: 'textfield', 
        name: 'title', 
        value:me.login, 
        fieldLabel: 'Title', 
        allowBlank: false, 
        width:330, 
        style:{ 
         marginTop:'10px', 
         marginLeft:'20px', 
         marginRight:'20px' 
        } 
       }, 

       { 
        title: 'Google Map', 
        width:535, 
        height:800, 
       // frame:true, 
         id:'gmapForm', 
        // height: '100%', 
        xtype: 'gmappanel', 
        gmapType: 'map', 
        center: { 
         geoCodeAddr: "221B Baker Street", 
         marker: { 
          title: 'Holmes Home' 
         } 
        }, 
        mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'], 
        mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'], 
        mapOptions : { 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }, 
        listeners: { 

         maprender: function(extMapComponent, googleMapComp){ 

          var marker = new google.maps.Marker({ 
           position: position = new google.maps.LatLng (42.16726190,-87.83146810), 
           // position: patientPosition, //patientPosition initialized in geocodePatientAddress() function in Home.js 
           map: googleMapComp, 
           animation: google.maps.Animation.DROP, 
           draggable: false, 
           title: 'Patient Location' 

          }); 

          google.maps.event.addListener(marker, 'click', function() { 
           // infowindow.open(googleMapComp, marker); 
           console.log('sssssssssss'); 
          }); 

          google.maps.event.addListener(marker, 'mouseout', function() { 
           infowindow.close(googleMapComp, marker); 
          }); 
         } 

        }, 
        handler : function() { 
         google.maps.event.addListener(marker, 'click', function() { 
          // infowindow.open(googleMapComp, marker); 
          console.log('sssssssssss'); 
         }); 
         // this.up('window').down('form').getForm().reset(); 
        } 


        /* google.maps.event.addListener(gObject, "click", function(e){ 
         alert('test'); 
        })*/ 

       } 

      ]; 
      this.buttons = [ 
       { 
        text:me.operation, 
        name: me.operation, 
        scope: this 
       }, 

      ]; 
      console.log(arguments); 
      this.callParent(arguments); 
     } 
    }); 

我也有控制器,其中

Ext.define('App.controller.AppController', { 
    extend: 'Ext.app.Controller', 
    views: [ 
     'App.AppPanelView', 

     'App.AppForm' 

     ], 
    stores: ['App.Apptore'], 
    models: ['App.AppModel'], 
    refs: [ 
     { ref: 'App', selector: 'AppForm' } 


    ], 

    init: function() { 
     this.control({ 


      'App button[name="Add"]':{ 
       click:this.addPersonForm, 
       afterrender:this.addMapListener 
     } 
     }); 
    }, 

    selectedRow:null, 
    countryId:null, 
    personProfile:null, 
    modalImageIndex:null, 
    imageId:null, 
    avatar:"", 



    addMarker:function(){ 
console.log("aaaaaaa"); 
     var win= Ext.widget('AppForm',{title:'Add Group',operation:'Add'}); 
     var trafficMap = Ext.getCmp('gmapForm'); 
     // var marker_icon = new google.maps.MarkerImage('images/map/' + thisIcon + '.png', new google.maps.Size(32, 32)); 
     /*var trafficMarker = new google.maps.Marker({ 
      position: new google.maps.LatLng(alert.lat, alert.lon), 
      map: trafficMap, 
     // icon: marker_icon, 
      id: 'trafficAlertIcon' *//*i*//* 
     });*/ 

     /*var options = { 
      lat:3.951941, 
      lng:-102.052002, 
      marker: {title:"Hello World!"}, 
      listeners: { 
       click: function(e){ 

       } 
      } 
     }; 
     console.log(trafficMap); 
     var lat = 3.951941, 
      lng = 102.052002; 
     var mpoint = new google.maps.LatLng(lat,lng); 
     trafficMap.addMarker(mpoint,options.marker,false,false, options.listeners);*/ 

     /* google.maps.event.addListener(trafficMarker, 'mousedown', function() 
     { 
      console.log('touched marker'); 
      *//* trafficTabPanel.layout.setActiveItem(1, {type: 'slide', direction: 'left'}); 
      LoadIncidentMap(this.id.substring(16));*//* 
     }); 
*/ 
     /* google.maps.event.addListener(trafficMap, "click", function (e) { 
      console.log('click'); 

      //lat and lng is available in e object 
     // var latLng = e.latLng; 

     });*/ 

     var addMarker = google.maps.event.addListener(trafficMap, 'click', function(e) { 
      var lat = e.latLng.lat(); // lat of clicked point 
      var lng = e.latLng.lng(); // lng of clicked point 
      var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object. 
      var marker = new google.maps.Marker({ 
       position: getLatLng(lat, lng), 
       map: map, 
       id: 'marker_' + markerId 
      }); 
      console.log(lat+ " "+ lng); 

      // markers[markerId] = marker; // cache marker in markers object 
     // bindMarkerEvents(marker); // bind right click event to marker 
     }); 
     addMarker; 
     console.log('clickaa'); 



     //win.show(); 
    }, 
    addMapListener:function() { 
     console.log("A1"); 

     var trafficMap = Ext.getCmp('gmapForm'); 
     google.maps.event.addListener(trafficMap, 'click', function(e) { 
      console.log("A3"); 

      var lat = e.latLng.lat(); // lat of clicked point 
      var lng = e.latLng.lng(); // lng of clicked point 
      var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object. 
      var marker = new google.maps.Marker({ 
       position: getLatLng(lat, lng), 
       map: map, 
       id: 'marker_' + markerId 
      }); 

      console.log(lat+" "+lng); 

      // markers[markerId] = marker; // cache marker in markers object 
      // bindMarkerEvents(marker); // bind right click event to marker 
     }); 
     console.log("A22"); 

     var map; 
     // map = new google.maps.Map($('#map')[0], myOptions); 
     /* var myOptions = { 
      zoom: 7, 
      center: new google.maps.LatLng(46.87916, -3.32910), 
      mapTypeId: 'roadmap' 
     }; 
     google.maps.event.addListener(map, 'click', function(e) { 
      console.log(A2); 

      var lat = e.latLng.lat(); // lat of clicked point 
      var lng = e.latLng.lng(); // lng of clicked point 
      var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object. 
      var marker = new google.maps.Marker({ 
       position: getLatLng(lat, lng), 
       map: map, 
       id: 'marker_' + markerId 
      }); 
      markers[markerId] = marker; // cache marker in markers object 
      bindMarkerEvents(marker); // bind right click event to marker 
     });*/ 

    } 
}); 

DOES SOMENONE知道如何做,因爲我不發現任何東西,亂投醫,抓住錯誤,但
我只需要添加標記,其中用戶在地圖上點擊鼠標

+0

我看不到地圖本身在哪裏創建,我在地圖對象上看不到任何事件偵聽器 – duncan

+0

@duncan標題:'Google Map', width:535, height:800, // frame:true, id:'gmapForm', // height:'100%', xtype:'gmappanel', gmapType:'map',heres他開始如何添加監聽器 – Sultan

+0

單擊地圖時是否執行此行? 'console.log(「A3」);' – duncan

回答

1

你有這樣的創建地圖和添加一個事件監聽器:

var trafficMap = Ext.getCmp('gmapForm'); 
google.maps.event.addListener(trafficMap, 'click', function(e) {  
    var lat = e.latLng.lat(); // lat of clicked point 
    var lng = e.latLng.lng(); // lng of clicked point 
    var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object. 
    var marker = new google.maps.Marker({ 
     position: getLatLng(lat, lng), 
     map: map, 
     id: 'marker_' + markerId 
    }); 
}); 

所以你要創建一個地圖並將其分配給一個名爲trafficMap變量。但隨後事件監聽器是指簡稱map地圖變量,當您添加一個新的標記:map: map

改變,要參考trafficMap變量,即

var marker = new google.maps.Marker({ 
    position: getLatLng(lat, lng), 
    map: trafficMap, 
    id: 'marker_' + markerId 
}); 

甚至只是:

var marker = new google.maps.Marker({ 
    position: getLatLng(lat, lng), 
    map: this, 
    id: 'marker_' + markerId 
}); 
+0

這段代碼將在'App'中:{ afterrender:this.addMapListener } on afterrender或click function in controller? – Sultan

+0

它沒有進入addListener函數? – Sultan