ExtJS 4從商店添加動態標記

這裏是我的代碼。我想從商店或其他文件（如.php）添加動態標記，其中包括添加它的函數。ExtJS 4從商店添加動態標記

Ext.define('Ext.ux.GMapPanel', { 
extend: 'Ext.panel.Panel', 
alias: 'widget.gmappanel', 
requires: ['Ext.window.MessageBox'], 
initComponent : function(){ 
    Ext.applyIf(this,{ 
     plain: true, 
     gmapType: 'map', 
     border: false 
    }); 

    this.callParent(); 
}, 

afterFirstLayout : function(){ 
    var center = this.center; 
    this.callParent(); 

    if (center) { 
     if (center.geoCodeAddr) { 
      this.lookupCode(center.geoCodeAddr, center.marker); 
     } else { 
      this.createMap(center); 
     } 
    } else { 
     Ext.Error.raise('center is required'); 
    } 

}, 

createMap: function(center, marker) { 
    options = Ext.apply({}, this.mapOptions); 
    options = Ext.applyIf(options, { 
     zoom: 14, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }); 
    this.gmap = new google.maps.Map(this.body.dom, options); 
    if (marker) { 
     this.addMarker(Ext.applyIf(marker, { 
      position: center 
     })); 
    } 

    Ext.each(this.markers, this.addMarker, this); 
}, 

addMarker: function(marker) { 
    marker = Ext.apply({ 
     map: this.gmap 
    }, marker); 

    if (!marker.position) { 
     marker.position = new google.maps.LatLng(marker.lat, marker.lng); 
    } 
    var o = new google.maps.Marker(marker); 
    Ext.Object.each(marker.listeners, function(name, fn){ 
     google.maps.event.addListener(o, name, fn); 
    }); 
    return o; 
}, 

lookupCode : function(addr, marker) { 
    this.geocoder = new google.maps.Geocoder(); 
    this.geocoder.geocode({ 
     address: addr 
    }, Ext.Function.bind(this.onLookupComplete, this, [marker], true)); 
}, 

onLookupComplete: function(data, response, marker){ 
    if (response != 'OK') { 
     Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"'); 
     return; 
    } 
    this.createMap(data[0].geometry.location, marker); 
}, 
afterComponentLayout : function(w, h){ 
    this.callParent(arguments); 
    this.redraw(); 
}, 

redraw: function(){ 
    var map = this.gmap; 
    if (map) { 
     google.maps.event.trigger(map, 'resize'); 
    } 
} 

});

這是指數的PHP

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Stateful Array Grid Example</title> 
<link rel="stylesheet" type="text/css" href="../../grid/extjs-4.1.1/resources/css/ext-all.css" /> 
<link rel="stylesheet" type="text/css" href="../../extjs-4.1.1./examples/shared/example.css" /> 

<!-- GC --> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=abcde&sensor=false"> </script> 

<script type="text/javascript" src="../../extjs-4.1.1/ext-all.js"></script> 



<script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true"> 
</script> 

<!-- page specific --> 

<script type="text/javascript" src="gmap.js"></script> 
</head> 
    <body> 
    <h1>GMap</h1> 
     <input type="button" id="show-btn" value="Gimme a Map" /><br /><br /> 


      </body>

我怎樣才能從文件或存儲添加標記？我不知道。請幫幫我。

這是從該代碼從ExtJS的4個實例溶於gmap.js

Ext.Loader.setConfig({enabled: true}); 
Ext.Loader.setPath('Ext.ux', '../ux'); 
Ext.require([ 
'Ext.window.*', 
'Ext.ux.GMapPanel' 
]); 

Ext.onReady(function(){ 
var mapwin; 
Ext.get('show-btn').on('click', function() { 
    // create the window on the first click and reuse on subsequent clicks 
    if(mapwin) { 
     mapwin.show(); 
    } else { 
     mapwin = Ext.create('Ext.window.Window', { 
      autoShow: true, 
      layout: 'fit', 
      title: 'GMap Window', 
      closeAction: 'hide', 
      width:450, 
      height:450, 
      border: false, 
      x: 40, 
      y: 60, 
      items: { 
       xtype: 'gmappanel', 
       center: { 
        geoCodeAddr: 'Baku, Azerbaijan', 
        marker: {title: ''} 
       }, 
       markers: [{ 
        lat: 42.339641, 
        lng: -71.094224, 
        title: 'Boston Museum of Fine Arts', 
        listeners: { 
         click: function(e){ 
          Ext.Msg.alert('It\'s fine', 'and it\'s art.'); 
         } 
        } 
       },{ 
        lat: 42.339419, 
        lng: -71.09077, 
        title: 'Northeastern University' 
       }] 
      } 
     }); 

    } 
}); 
});

代碼。

來源

2012-08-07 Sam

創建一個商店來加載您的記錄。
然後爲該商店創建一個加載事件，並針對您的加載事件修改以下代碼。

我店的加載事件。

// Put the markers on the map after the store loads. 
onLoad: function(store, records, success, options) { 
    var me = options.scope 
    Ext.each(records, function(record) { 
     this.addMarker(record.data); 
    }, me) 
},

來源

2012-08-07 17:29:16 drjamescook

對於那些誰不知道如何安裝一個事件： VAR店= Ext.data.StoreManager.lookup（ 'MyStoreMarkers'）; store.load（this.onLoad）; store.load（this.onLoad）; – 2014-03-17 23:10:15

ExtJS 4從商店添加動態標記

回答

相關問題