これが私のコードです。追加する関数を含むストアまたは.phpのような別のファイルから動的にマーカーを追加したい。
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>
ファイルまたはストアからマーカーを追加するにはどうすればよいですか? わかりません。私を助けてください。
これは 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'
}]
}
});
}
});
});
このコードは、extjs 4 の例から取られたものです。