我对sencha touch很新。目标是创建一个应用程序,其中有一个包含四个选项卡的TabPanel,其中一个应该是一个地图(其他的是一个NestedList,两个面板就像一个魅力)。我试图让地图卡像 NPApp.views.Mapcard = Ext.extend(Ext.Map,{... 我最终得到了一些非常奇怪的结果,比如一些视图重叠并且没有显示地图......
第二次尝试是创建一个Panel,将其嵌入TabPanel并向面板添加一个地图,我收到此错误:
未捕获的TypeError:无法读取未定义的属性“ROADMAP”; 煎茶-触摸debug.js:24840
我已经尝试将mapType更改为Google Map API V3中提到的google.map.MapTypeID,但没有成功。
我无法掌握它,希望你能给我一些提示!
应用程序:
NPApp = new Ext.Application({
name: "NPApp",
title: "NextPuff",
icon: 'images/icon.png',
tabletStartupScreen: 'images/index_default.jpg',
phoneStartupScreen: 'images/index_default.jpg',
launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('navi');
}
});
视口:
NPApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
store: NPApp.npstore,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard', stretch: true},
{ xtype: 'searchcard', id: 'navi' },
{ xtype: 'mapcard' },
{ xtype: 'morecard' }
]
});
NPApp.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
地图卡:
NPApp.views.Mapcard = Ext.extend(Ext.Panel, {
title: "Map",
iconCls: "map",
initComponent: function() {
var npMap = 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
}
});
Ext.apply(this, {
defaults: {
styleHtmlContent: true
},
items: [npMap]
});
NPApp.views.Homecard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('mapcard', NPApp.views.Mapcard);
Sencha 1.1.0; Google JavaScript Maps API V3; Safari 5.1
由于 君特
答案 0 :(得分:2)
我有一个类似的应用程序在运行。您的tabpanel是完美的。您需要更改的是地图代码....请尝试使用此代码:
var map = new Ext.Map({
mapOptions : {
center : center,
zoom : 20,
mapTypeId : google.maps.MapTypeId.HYBRID,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners : {
maprender : function(comp, map){
var marker = new google.maps.Marker({
position: center,
//title : 'Sencha HQ',
map: map
});
setTimeout( function(){map.panTo (center);} , 1000);
}
},
geo:new Ext.util.GeoLocation({
autoUpdate:true,
maximumAge: 0,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);
if (map.rendered)
map.update(center)
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function ( geo,
bTimeout,
bPermissionDenied,
bLocationUnavailable,
message) {
if(bLocationUnavailable){
alert('Your Current Location is Unavailable on this device');
}
else{
alert('Error occurred.');
}
}
}
})
});
这将创建地图对象并将中心设置为当前位置。现在你需要将这个对象停靠在Ext.extend(Ext.Panel({})对象中。我曾尝试直接创建地图对象,但它需要一个面板来显示。
所以你的面板代码应该是这样的:
NPApp.views.Mapcard = new Ext.extend(Ext.Panel({
iconCls : 'map',
title : 'Map',
layout: 'card',
ui: 'light',
items: [map],
listeners:{
}
});
)
我花了很多时间才通过十几个例子来使当前位置工作。这是Google API中的几个代码和一堆内容的组合。
Lemme知道您是否对Google地图或路线有任何疑问。
干杯:) 武