Sencha touch 森查地图中心不';无法在内置应用程序上工作

Sencha touch 森查地图中心不';无法在内置应用程序上工作,sencha-touch,sencha-touch-2,sencha-cmd,Sencha Touch,Sencha Touch 2,Sencha Cmd,我有一个带有地图的sencha touch 2应用程序: xtype: "map", mapOptions: { zoom: 11, center: new google.maps.LatLng(51.516357, -0.113234), navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT

我有一个带有地图的sencha touch 2应用程序:

xtype: "map",
mapOptions: {
    zoom: 11,
    center: new google.maps.LatLng(51.516357, -0.113234),
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.DEFAULT
    }
}

当我使用它时,它工作得很好,但是当我对任何类型使用
sencha app build
时,地图将显示它在Palo Alto附近的位置作为中心,而不是我给它的坐标。没有抛出错误。

我从sencha更新了map.js。现在它的工作很好!(touch/src/Map.js)

/**
*使用[Google Maps API]将Google地图包装到Ext.组件中(http://code.google.com/apis/maps/documentation/v3/introduction.html).
*
*要使用此组件,您必须包含来自Google的附加JavaScript文件:
*
*     
*
*##示例
*
*Ext.Viewport.add({
*xtype:'map',
*useCurrentLocation:true
*     });
*
*@示例地图
*/
Ext.define('Ext.Map'{
扩展:“Ext.Container”,
xtype:'map',
需要:['Ext.util.Geolocation'],
isMap:没错,
配置:{
/**
*@event-maprender
*在贴图最初渲染时激发。
*@param{Ext.Map}这个
*@param{google.maps.Map}映射呈现的google.Map.Map实例
*/
/**
*@事件中心更改
*当地图被平移时激发。
*@param{Ext.Map}这个
*@param{google.maps.Map}映射呈现的google.Map.Map实例
*@param{google.maps.LatLng}center当前地图的LatLng中心
*/
/**
*@事件类型更改
*当地图的显示类型更改时激发。
*@param{Ext.Map}这个
*@param{google.maps.Map}映射呈现的google.Map.Map实例
*@param{Number}mapType地图的当前显示类型
*/
/**
*@event zoomchange
*缩放贴图时激发。
*@param{Ext.Map}这个
*@param{google.maps.Map}映射呈现的google.Map.Map实例
*@param{Number}zoomLevel地图的当前缩放级别
*/
/**
*@cfg{String}baseCls
*应用于地图元素的基本CSS类
*@存取器
*/
baseCls:Ext.baseCSSPrefix+“映射”,
/**
*@cfg{Boolean/Ext.util.Geolocation}useCurrentLocation
*传入true以基于地理位置坐标使地图居中,或传入
*{@link Ext.util.Geolocation Geolocation}配置以对您的地理位置选项进行更多控制
*@存取器
*/
useCurrentLocation:false,
/**
*@cfg{google.maps.Map}Map
*包装好的地图。
*@存取器
*/
map:null,
/**
*@cfg{Ext.util.Geolocation}geo
*地图的地理位置提供程序。
*@存取器
*/
geo:null,
/**
*@cfg{Object}mappoptions
*谷歌文档中指定的映射选项:
* [http://code.google.com/apis/maps/documentation/v3/reference.html](http://code.google.com/apis/maps/documentation/v3/reference.html)
*@存取器
*/
映射选项:{}
},
构造函数:函数(){
this.callParent(参数);
//this.element.setVisibilityMode(Ext.element.offset);
if(!(window.google |{}).maps){
此.setHtml('需要谷歌地图API');
}
},
初始化:函数(){
这是callParent();
这是我的({
画着:“doResize”,
范围:本
});
this.innerElement.on('touchstart','onTouchStart',this);
},
getElementConfig:function(){
返回{
引用:'元素',
类名:“x容器”,
儿童:[{
引用:'innerElement',
类名:“x-内部”,
儿童:[{
引用:'mapContainer',
类名:Ext.baseCSSPrefix+“映射容器”
}]
}]
};
},
onTouchStart:功能(e){
e、 使不可预防();
},
应用程序选项:函数(选项){
返回Ext.merge({},this.options,options);
},
updateMapOptions:函数(新选项){
var me=这个,
gm=(window.google |{}).maps,
map=this.getMap();
如果(总经理和总经理){
map.setOptions(newOptions);
}
if(newOptions.center&&!me.ispaint()){
me.un('painted','doMapCenter',this);
me.on('painted','doMapCenter',this,{delay:150,single:true});
}
},
doMapCenter:function(){
this.setMapCenter(this.getMapOptions().center);
},
getMapOptions:function(){
返回Ext.merge({},this.options | | this.getInitialConfig('mapOptions'));
},
updateUseCurrentLocation:函数(useCurrentLocation){
这个.setGeo(useCurrentLocation);
如果(!useCurrentLocation){
这是setMapCenter();
}
},
applyGeo:函数(配置){
返回Ext.factory(config,Ext.util.Geolocation,this.getGeo());
},
updateGeo:函数(newGeo、oldGeo){
var事件={
位置更新:“OngeUpdate”,
locationerror:“onGeoError”,
范围:本
};
if(oldGeo){
oldGeo.un(活动);
}
国际单项体育联合会(新地理){
新地理新闻(活动);
newGeo.updateLocation();
}
},
doResize:function(){
var gm=(window.google |{}).maps,
map=this.getMap();
如果(总经理和总经理){
gm.event.trigger(映射,“调整大小”);
}
},
//@私人
renderMap:function(){
var me=这个,
gm=(window.google |{}).maps,
element=me.mapContainer,
mapOptions=me.getMapOptions(),
map=me.getMap(),
事件
国际单项体育联合会(总经理){
if(Ext.os.is.iPad){
/**
 * Wraps a Google Map in an Ext.Component using the [Google Maps API](http://code.google.com/apis/maps/documentation/v3/introduction.html).
 *
 * To use this component you must include an additional JavaScript file from Google:
 *
 *     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 *
 * ## Example
 *
 *     Ext.Viewport.add({
 *         xtype: 'map',
 *         useCurrentLocation: true
 *     });
 *
 * @aside example maps
 */
Ext.define('Ext.Map', {
    extend: 'Ext.Container',
    xtype : 'map',
    requires: ['Ext.util.Geolocation'],

    isMap: true,

    config: {
        /**
         * @event maprender
         * Fired when Map initially rendered.
         * @param {Ext.Map} this
         * @param {google.maps.Map} map The rendered google.map.Map instance
         */

        /**
         * @event centerchange
         * Fired when map is panned around.
         * @param {Ext.Map} this
         * @param {google.maps.Map} map The rendered google.map.Map instance
         * @param {google.maps.LatLng} center The current LatLng center of the map
         */

        /**
         * @event typechange
         * Fired when display type of the map changes.
         * @param {Ext.Map} this
         * @param {google.maps.Map} map The rendered google.map.Map instance
         * @param {Number} mapType The current display type of the map
         */

        /**
         * @event zoomchange
         * Fired when map is zoomed.
         * @param {Ext.Map} this
         * @param {google.maps.Map} map The rendered google.map.Map instance
         * @param {Number} zoomLevel The current zoom level of the map
         */

        /**
         * @cfg {String} baseCls
         * The base CSS class to apply to the Map's element
         * @accessor
         */
        baseCls: Ext.baseCSSPrefix + 'map',

        /**
         * @cfg {Boolean/Ext.util.Geolocation} useCurrentLocation
         * Pass in true to center the map based on the geolocation coordinates or pass a
         * {@link Ext.util.Geolocation GeoLocation} config to have more control over your GeoLocation options
         * @accessor
         */
        useCurrentLocation: false,

        /**
         * @cfg {google.maps.Map} map
         * The wrapped map.
         * @accessor
         */
        map: null,

        /**
         * @cfg {Ext.util.Geolocation} geo
         * Geolocation provider for the map.
         * @accessor
         */
        geo: null,

        /**
         * @cfg {Object} mapOptions
         * MapOptions as specified by the Google Documentation:
         * [http://code.google.com/apis/maps/documentation/v3/reference.html](http://code.google.com/apis/maps/documentation/v3/reference.html)
         * @accessor
         */
        mapOptions: {}
    },

    constructor: function() {
        this.callParent(arguments);
        // this.element.setVisibilityMode(Ext.Element.OFFSETS);

        if (!(window.google || {}).maps) {
            this.setHtml('Google Maps API is required');
        }
    },

    initialize: function() {
        this.callParent();
        this.on({
            painted: 'doResize',
            scope: this
        });
        this.innerElement.on('touchstart', 'onTouchStart', this);
    },

    getElementConfig: function() {
        return {
            reference: 'element',
            className: 'x-container',
            children: [{
                reference: 'innerElement',
                className: 'x-inner',
                children: [{
                    reference: 'mapContainer',
                    className: Ext.baseCSSPrefix + 'map-container'
                }]
            }]
        };
    },

    onTouchStart: function(e) {
        e.makeUnpreventable();
    },

    applyMapOptions: function(options) {
        return Ext.merge({}, this.options, options);
    },

    updateMapOptions: function(newOptions) {
        var me = this,
            gm = (window.google || {}).maps,
            map = this.getMap();

        if (gm && map) {
            map.setOptions(newOptions);
        }
        if (newOptions.center && !me.isPainted()) {
            me.un('painted', 'doMapCenter', this);
            me.on('painted', 'doMapCenter', this, { delay: 150, single: true });
        }
    },

    doMapCenter: function() {
        this.setMapCenter(this.getMapOptions().center);
    },

    getMapOptions: function() {
        return Ext.merge({}, this.options || this.getInitialConfig('mapOptions'));
    },

    updateUseCurrentLocation: function(useCurrentLocation) {
        this.setGeo(useCurrentLocation);
        if (!useCurrentLocation) {
            this.setMapCenter();
        }
    },

    applyGeo: function(config) {
        return Ext.factory(config, Ext.util.Geolocation, this.getGeo());
    },

    updateGeo: function(newGeo, oldGeo) {
        var events = {
            locationupdate : 'onGeoUpdate',
            locationerror : 'onGeoError',
            scope : this
        };

        if (oldGeo) {
            oldGeo.un(events);
        }

        if (newGeo) {
            newGeo.on(events);
            newGeo.updateLocation();
        }
    },

    doResize: function() {
        var gm = (window.google || {}).maps,
            map = this.getMap();

        if (gm && map) {
            gm.event.trigger(map, "resize");
        }
    },

    // @private
    renderMap: function() {
        var me = this,
            gm = (window.google || {}).maps,
            element = me.mapContainer,
            mapOptions = me.getMapOptions(),
            map = me.getMap(),
            event;

        if (gm) {
            if (Ext.os.is.iPad) {
                Ext.merge({
                    navigationControlOptions: {
                        style: gm.NavigationControlStyle.ZOOM_PAN
                    }
                }, mapOptions);
            }

            mapOptions.zoom = mapOptions.zoom || 12;
            mapOptions.mapTypeId = mapOptions.mapTypeId || gm.MapTypeId.ROADMAP;

            // This is done separately from the above merge so we don't have to instantiate
            // a new LatLng if we don't need to
            if (!mapOptions.hasOwnProperty('center')) {
                mapOptions.center = new gm.LatLng(37.381592, -122.135672); // Palo Alto
            }

            if (mapOptions.center && mapOptions.center.latitude && !Ext.isFunction(mapOptions.center.lat)) {
                mapOptions.center = new gm.LatLng(mapOptions.center.latitude, mapOptions.center.longitude);
            }

            if (element.dom.firstChild) {
                Ext.fly(element.dom.firstChild).destroy();
            }

            if (map) {
                gm.event.clearInstanceListeners(map);
            }

            me.setMap(new gm.Map(element.dom, mapOptions));
            map = me.getMap();

            //Track zoomLevel and mapType changes
            event = gm.event;
            event.addListener(map, 'zoom_changed', Ext.bind(me.onZoomChange, me));
            event.addListener(map, 'maptypeid_changed', Ext.bind(me.onTypeChange, me));
            event.addListener(map, 'center_changed', Ext.bind(me.onCenterChange, me));
   //         event.addListenerOnce(map, 'tilesloaded', Ext.bind(me.onTilesLoaded, me));

   // the fix for the build issue:
   me.fireEvent('maprender', me, map);
        }
    },

    // @private
    onTilesLoaded: function() {
        this.fireEvent('maprender', this, this.map);
    },

    // @private
    onGeoUpdate: function(geo) {
        if (geo) {
            this.setMapCenter(new google.maps.LatLng(geo.getLatitude(), geo.getLongitude()));
        }
    },

    // @private
    onGeoError: Ext.emptyFn,

    /**
     * Moves the map center to the designated coordinates hash of the form:
     *
     *     { latitude: 37.381592, longitude: -122.135672 }
     *
     * or a google.maps.LatLng object representing to the target location.
     *
     * @param {Object/google.maps.LatLng} coordinates Object representing the desired Latitude and
     * longitude upon which to center the map.
     */
    setMapCenter: function(coordinates) {
        var me = this,
            map = me.getMap(),
            gm = (window.google || {}).maps;

        if (gm) {
            if (!me.isPainted()) {
                me.un('painted', 'doMapCenter', this);
                me.on('painted', 'doMapCenter', this, { delay: 150, single: true });
                return;
            }
            coordinates = coordinates || new gm.LatLng(37.381592, -122.135672);

            if (coordinates && !(coordinates instanceof gm.LatLng) && 'longitude' in coordinates) {
                coordinates = new gm.LatLng(coordinates.latitude, coordinates.longitude);
            }

            if (!map) {
                me.renderMap();
                map = me.getMap();
            }

            if (map && coordinates instanceof gm.LatLng) {
                map.panTo(coordinates);
            }
            else {
                this.options = Ext.apply(this.getMapOptions(), {
                    center: coordinates
                });
            }
        }
    },

    // @private
    onZoomChange : function() {
        var mapOptions = this.getMapOptions(),
            map = this.getMap(),
            zoom;

        zoom = (map && map.getZoom) ? map.getZoom() : mapOptions.zoom || 10;

        this.options = Ext.apply(mapOptions, {
            zoom: zoom
        });

        this.fireEvent('zoomchange', this, map, zoom);
    },

    // @private
    onTypeChange : function() {
        var mapOptions = this.getMapOptions(),
            map = this.getMap(),
            mapTypeId;

        mapTypeId = (map && map.getMapTypeId) ? map.getMapTypeId() : mapOptions.mapTypeId;

        this.options = Ext.apply(mapOptions, {
            mapTypeId: mapTypeId
        });

        this.fireEvent('typechange', this, map, mapTypeId);
    },

    // @private
    onCenterChange: function() {
        var mapOptions = this.getMapOptions(),
            map = this.getMap(),
            center;

        center = (map && map.getCenter) ? map.getCenter() : mapOptions.center;

        this.options = Ext.apply(mapOptions, {
            center: center
        });

        this.fireEvent('centerchange', this, map, center);

    },

    // @private
    destroy: function() {
        Ext.destroy(this.getGeo());
        var map = this.getMap();

        if (map && (window.google || {}).maps) {
            google.maps.event.clearInstanceListeners(map);
        }

        this.callParent();
    }
}, function() {
    //<deprecated product=touch since=2.0>

    /**
     * @cfg {Boolean} maskMap
     * Masks the map
     * @removed 2.0.0 Please mask this components container instead.
     */

    /**
     * @cfg {String} maskMapCls
     * CSS class to add to the map when maskMap is set to true.
     * @removed 2.0.0 Please mask this components container instead.
     */

    /**
     * @method getState
     * Returns the state of the Map.
     * @deprecated 2.0.0 Please use {@link #getMapOptions} instead.
     * @return {Object} mapOptions
     */
    Ext.deprecateClassMethod(this, 'getState', 'getMapOptions');

    /**
     * @method update
     * Moves the map center to the designated coordinates hash of the form:
     *
     *     { latitude: 37.381592, longitude: -122.135672 }
     *
     * or a google.maps.LatLng object representing to the target location.
     *
     * @deprecated 2.0.0 Please use the {@link #setMapCenter}
     * @param {Object/google.maps.LatLng} coordinates Object representing the desired Latitude and
     * longitude upon which to center the map.
     */
    Ext.deprecateClassMethod(this, 'update', 'setMapCenter');

    //</deprecated>
});