I'm having a great time learning Sencha Touch but it seems to me that somethings should be simpler or are buggy. What I'm trying to do right now is add a Marker to show the current location on a Map .
I have a Viewport with a top Toolbar and a TabPanel, with a Map on the first card (tab) and I can get the current location without a problem. The problem I'm having is with the creation of the marker indicating where I am.
I've tried event listeners on both the map and it's parent container, but still can't get it to work. Maybe it's a scope problem?! Any help would be much appreciated...
CODE:
Ext.setup({
...
onReady: function() {
var TopBar, Tabs, MapHome, Viewport, Homecard;
/*
* HOME
*/
MapHome = new Ext.Map({
title: 'Map',
useCurrentLocation: true
});
Homecard = new Ext.Panel({
title: "home",
iconCls: "home",
items: [MapHome],
listeners: {
activate: function() {
var marker = new google.maps.Marker({
position: MapHome.map.center,
title : 'testing',
map: MapHome.map
});
}
}
});
/*
* MAIN
*/
TopBar = new Ext.Toolbar({
dock: 'top',
xtype: "toolbar",
title: "<img class='titleLogo' src='css/images/logo.png' />",
items: [
{ xtype: 'spacer' },
{
iconCls: 'settings9',
iconMask: true,
text: 'options'
}
]
});
Tabs = new Ext.TabPanel({
id: 'tabs',
//fullscreen:true,
dock: 'bottom',
flex: 1,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [ Homecard]
});
Viewport = new Ext.Panel({
fullscreen:true,
layout:{type:'vbox',align: 'stretch'},
useLoadMask:true,
ui:'dark',
items: [TopBar,Tabs],
});
}
});
The event listener for centerchange
was the best solution I found. And since my map has no interaction whatsoever, that seems to work for me.
Here's the code:
Ext.setup({
fullscreen: true,
tabletStartupScreen: 'splash.png',
phoneStartupScreen: 'splash.png',
icon: 'icon.png',
glossOnIcon: true,
onReady: function() {
var refreshMap = function(themap){
// It should clear all markers first, but that is not important right now since the map has all interaction disabled
var marker = new google.maps.Marker({
position: themap.center,
title : 'testing',
map: themap
});
}
var TopBar, Tabs, MapHome, Viewport, Homecard;
/*
* HOME
*/
MapHome = new Ext.Map({
title: 'Map',
useCurrentLocation: true,
listeners: {
centerchange : function(comp, map){
refreshMap(map);
}
},
mapOptions : {
mapTypeControl : false,
navigationControl : false,
streetViewControl : false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
zoom: 17,
draggable: false,
keyboardShortcuts: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID
}
});
Homecard = new Ext.Panel({
title: "home",
iconCls: "home",
items: [MapHome]
});
/*
* MAIN
*/
TopBar = new Ext.Toolbar({
dock: 'top',
xtype: "toolbar",
title: "<img class='titleLogo' src='css/images/logo.png' />",
items: [
{ xtype: 'spacer' },
{
iconCls: 'settings9',
iconMask: true,
text: 'options'
}
]
});
Tabs = new Ext.TabPanel({
id: 'tabs',
//fullscreen:true,
dock: 'bottom',
flex: 1,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [ Homecard, Nearbycard, Waypointscard, Shopcard, Searchcard]
});
Viewport = new Ext.Panel({
fullscreen:true,
layout:{type:'vbox',align: 'stretch'},
useLoadMask:true,
ui:'dark',
items: [TopBar,Tabs],
});
}
});
Looks like your activate
event is going to be called before your map has had a chance to be rendered to the screen and readied itself. Try triggering your Marker code with the maprender
event that is fired by the Map component.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.