Sencha Touch: Can't add Marker to Map. Please Help?
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 wit开发者_StackOverflowh 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.
精彩评论