单击GmapPanel中的event

Click event in GmapPanel

本文关键字:event 中的 GmapPanel 单击      更新时间:2023-09-26

如何在文档中实现ExtJs中的点击事件https://docs.sencha.com/extjs/4.2.3/#!/api/Ext.ux.GMapPanel-method-addListener我知道在javascript中,但ExtJs如何使谷歌地图js我已经做了很多点击监听器,但没有成功,请问你能告诉点击应该在控制器通过参考等等?

 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);
        }
    });

extjs的Google地图插件有问题。

你可以直接与google maps api和extjs集成。

下面是一个具有搜索和覆盖功能的示例:

https://fiddle.sencha.com/小提琴/cva的

至于点击事件,你可以使用:

marker.addListener('click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
 });
https://developers.google.com/maps/documentation/javascript/events