2015-09-02 90 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