添加是GmapPanel中的动态标记 - EXTJS 4

时间:2013-02-21 19:22:52

标签: javascript ajax google-maps extjs extjs4

这是创建标识为mygooglemap代码

的googlemap面板
var layout = Ext.create('Ext.panel.Panel', {
            //renderTo: 'layout',
            width: window.innerWidth,
            height: window.innerHeight,
            //title: 'Border Layout', //no title will be blank
            layout: 'border',
            items: [{
                title: 'Message List',
                region: 'south',     // position for region
                xtype: 'panel',
                height: 100,
                split: true,         // enable resizing
                collapsible: true,
                margins: '0 5 5 5',
                collapsed: true
            },tree,{
                    xtype: 'gmappanel',
                    id : 'mygooglemap',
                    gmapType: 'map',
                    zoomLevel: 7,
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],  
                    setCenter: {
                        lat: 3.951941,
                        lng: 102.052002,
                    }
                }],
            renderTo: Ext.getBody() //get the body and display Layout at there
        });
    });

这是当点击检查树复选框并且复选框的状态为真时,然后在googlemap上添加标记

 Ext.define('GoogleMarkerModel', {
            extend: 'Ext.data.Model',
            fields: ['Locating','MainPower','Acc','PowerOff','Alarm','Speed','Direction','Latitude','Longitude','DateTime','MainID', 'DeviceID','IOState','OilState']
        });

        var MarkerStore = Ext.create('Ext.data.JsonStore', {
            model: 'GoogleMarkerModel',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'get-googlemarker.php',
                baseParams: {  //here you can define params you want to be sent on each request from this store
                            mainid: 'value1'
                            },
                reader: {
                    type: 'json',
                    root: 'images'
                }
            }
        });

        tree.on('checkchange', function(node){
            var data = node.data;
            Ext.MessageBox.show({
            title: 'Changed checkbox status',
            msg: 'MainID: ' + data.MainID + ' <br /> Checkbox status: ' + data.checked,
            icon: Ext.MessageBox.INFO
            });
            if (data.checked = true){

                MarkerStore.load({
                            params: {
                                    mainid: data.MainID
                                    }
                            })  
                         //after markerstore get the longtitude and latitude,add google map a marker at here
            }
        })

选中复选框后,会将ID传递给get-googlemarker.php并获取MarkerStore中数据库存储的最新经度和纬度,并在googlemap上显示标记。
所有编码都已完成,只需在googlemap上留下添加标记,如何在googlemap上动态添加标记? 标记将在函数tree.on('checkchange', function(node)

内创建

1 个答案:

答案 0 :(得分:0)

    function addDoctorLocation(options) 
    {
     var gm = Ext.getCmp('mygooglemap');
     var mpoint = new google.maps.LatLng(options.lat,options.lng);
     var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
    }

tree.on('checkchange', function(node){
        var data = node.data;

        if (data.checked == true){

        var options = {
        lat:lati,
        lng:longi,
        marker: {title:"Hello World!"},
        listeners: {
                     click: function(e){

                                         }
                    }     
        }     
        addDoctorLocation(options);           
        }       
    })

已使用此代码

解决