javascript - 处理gmappanel extJS中的点击事件

Question

点击事件映射已实现，但没有任何反应。我正在使用 MVC Extjs 我知道如何在 javascript 中实现，例如 http://jsfiddle.net/fatihacet/ckegk/简单的点击事件，但在 extjs 中，我应该将代码放在窗口中的 gmappanel 中，如何在 Controller 中处理此事件。单击 map 标记时应该出现在该位置。我已阅读文档，找到了 google.maps.event.addListener 但如何来实现这个

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

我还有 Controller

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

    }
});

有人知道如何做到这一点吗，因为我没有找到任何东西，也没有尝试一切并发现错误，但是
我只需要在用户在 map 上点击鼠标的位置添加标记

Answer 1

您可以创建 map 并添加事件监听器:

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

因此，您正在创建一个 map 并将其分配给名为 trafficMap 的变量。但是，当您添加新标记时，您的事件监听器会引用一个名为 map 的 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
});