i32rumor's Perfil
- Poner una imagen personalizada de para el punto
- Puntos por latitud y longitud, y por direccion.
- Insercion de eventos.
- Código: Seleccionar todo
Ext.define('Ext.ux.GMapPanel', {
extend: 'Ext.Panel',
alias: 'widget.gmappanel',
requires: ['Ext.window.MessageBox'],
initComponent : function(){
this.markersArray_overlay= new Array();
var defConfig = {
plain: true,
zoomLevel: 3,
yaw: 180,
pitch: 0,
zoom: 1,
gmapType: 'map',
border: false
};
Ext.applyIf(this,defConfig);
this.callParent();
},
afterRender : function(){
var wh = this.ownerCt.getSize(),
point;
Ext.applyIf(this, wh);
this.callParent();
var myLatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: this.zoomLevel,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myLatlong=new google.maps.LatLng(this.setCenter.lat,this.setCenter.lng)
var panoramaOptions = {
position:myLatlong,
pov: {
heading: this.yaw,
pitch:this.pitch,
zoom:this.zoom
}
};
if (this.gmapType === 'map'){
this.gmap = new google.maps.Map(this.body.dom, myOptions);
}
if (this.gmapType === 'panorama'){
this.gmap = new google.maps.StreetViewPanorama(this.body.dom,panoramaOptions);
}
//if (typeof this.addControl == 'object' && this.gmapType === 'map') {
// this.gmap.addControl(this.addControl);
//}
google.maps.event.trigger(this.gmap, 'resize');
if (typeof this.setCenter === 'object') {
if (typeof this.setCenter.geoCodeAddr === 'string'){
this.geoCodeLookup(this.setCenter.geoCodeAddr);
}else{
if (this.gmapType === 'map'){
point = new google.maps.LatLng(this.setCenter.lat,this.setCenter.lng);
this.gmap.setCenter(point);
}
if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
}
this.onMapReady();
}
/*if (this.gmapType === 'panorama'){
this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
}*/
}
/* GEvent.bind(this.gmap, 'load', this, function(){
this.onMapReady();
});*/
// google.maps.event.addListener(this.gmap, 'load', this, function(){
// alert('asdfjmjmh');
//});
},
onMapReady : function(){
if(this.gmapType === 'map'){
this.addMarkers(this.markers);
this.addMapControls();
this.addOptions();
}
},
afterComponentLayout : function(w, h){
Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
},
onResize : function(w, h){
Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
},
setSize : function(width, height, animate){
Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
},
getMap : function(){
return this.gmap;
},
getCenter : function(){
return this.getMap().getCenter();
},
getCenterLatLng : function(){
var ll = this.getCenter();
return {lat: ll.lat(), lng: ll.lng()};
},
addMarkers : function(markers) {
if (Ext.isArray(markers)){
for (var i = 0; i < markers.length; i++) {
if (typeof markers[i].geoCodeAddr === 'string'){
this.geoCodeLookupMarker(markers[i].geoCodeAddr);
var mkr_point = this.getMap().getCenter();
this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners, markers[i].image);
}else{
var mkr_point = new google.maps.LatLng(markers[i].lat,markers[i].lng);
this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners, markers[i].image);
}
}
}
},
addMarker : function(point, marker, clear, center, listeners, imagen){
Ext.applyIf(marker,new google.maps.Marker());
if(imagen!=null){
var blueIcon = new google.maps.MarkerImage(imagen.imageurl,
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(imagen.imagewidth, imagen.imageheight),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(imagen.imagewidth/2, imagen.imageheight));
if(imagen.imageurl_shadow!=null){
var blueIcon_shadow = new google.maps.MarkerImage(imagen.imageurl_shadow,
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(imagen.imagewidth_shadow, imagen.imageheight_shadow),
new google.maps.Point(0,0),
new google.maps.Point(imagen.imagewidth/2, imagen.imageheight_shadow));
// Set up our GMarkerOptions object
marker = new google.maps.Marker({position:point, title:marker.title, icon:blueIcon, shadow: blueIcon_shadow, map: this.getMap() });
}else{
marker = new google.maps.Marker({position:point, title:marker.title, icon:blueIcon, map: this.getMap() });
}
}else{
marker = new google.maps.Marker({position:point, title:marker.title, map: this.getMap() });
}
if (clear === true){
if ( this.markersArray_overlay) {
for (o in this.markersArray_overlay) {
this.markersArray[o].setMap(null);
}
this.markersArray_overlay.length = 0;
}
}
if (center === true) {
this.getMap().setCenter(point);
}
var mark = marker;
if (typeof listeners === 'object'){
for (evt in listeners) {
google.maps.event.addListener(mark, evt, listeners[evt]);
}
}
this.markersArray_overlay.push(mark);
//this.getMap().addOverlay(mark);
},
addMapControls : function(){
if (this.gmapType === 'map') {
if (Ext.isArray(this.mapControls)) {
for(i=0;i<this.mapControls.length;i++){
this.addMapControl(this.mapControls[i]);
}
}else if(typeof this.mapControls === 'string'){
this.addMapControl(this.mapControls);
}else if(typeof this.mapControls === 'object'){
this.getMap().addControl(this.mapControls);
}
}
},
addMapControl : function(mc){
var mcf = window[mc];
if (typeof mcf === 'function') {
this.getMap().addControl(new mcf());
}
},
addOptions : function(){
if (Ext.isArray(this.mapConfOpts)) {
for(i=0;i<this.mapConfOpts.length;i++){
this.addOption(this.mapConfOpts[i]);
}
}else if(typeof this.mapConfOpts === 'string'){
this.addOption(this.mapConfOpts);
}
},
addOption : function(mc){
var mcf = this.getMap()[mc];
if (typeof mcf === 'function') {
this.getMap()[mc]();
}
},
geoCodeLookup : function(addr) {
this.geocoder = new google.maps.Geocoder();
this.geocoder.geocode({'address':addr}, this.addAddressToMap.createDelegate(this));
},
addAddressToMap : function(response, status) {
if (status == google.maps.GeocoderStatus.OK) {
this.getMap().setCenter(response[0].geometry.location);
/*var marker = new google.maps.Marker({
map: this.getMap(),
position: response[0].geometry.location
});
this.markersArray_overlay.push(marker);*/
this.onMapReady();
}else{
Ext.MessageBox.alert('Unable to Locate Address', 'Geocode was not successful for the following reason: '+status);
}
},
geoCodeLookupMarker : function(addr) {
this.geocoder = new google.maps.Geocoder();
this.geocoder.geocode({'address':addr}, this.addAddressToMapMarker.createDelegate(this));
},
addAddressToMapMarker : function(response, status) {
if (status == google.maps.GeocoderStatus.OK) {
this.getMap().setCenter(response[0].geometry.location);
/* var marker = new google.maps.Marker({
map: this.getMap(),
position: response[0].geometry.location
});
this.markersArray_overlay.push(marker);*/
}else{
Ext.MessageBox.alert('Unable to Locate Address', 'Geocode was not successful for the following reason: '+status);
}
}
});
Ejemplo de una llamada al plugin:
- Código: Seleccionar todo
{
xtype: 'gmappanel',
zoomLevel: 14,
gmapType: 'map',
width:480,
height:480,
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl'],
setCenter: {
lat: [latitud_punto],
lng: [longitud_punto],
marker: false
},
markers: [{
lat: [latitud_punto],
lng: [longitud_punto],
setCenter:true,
marker: {title: '[titulo_marcador]'
},
listeners: {
click: function(e, mark){
// funcion que se desee ejecutar
}
},
image:{ imageurl:'[url_imagen_marcador]', imagewidth:[ancho_imagen_marcador], imageheight:[alto_imagen_marcador], imageurl_shadow:'[url_imagen_sombra_marcador]', imagewidth_shadow:[ancho_imagen_sombra_marcador], imageheight_shadow:[alto_imagen_sombra_marcador]}
}]
}
Ramiro P. Saenz (garraS)'s Sitio web
