Fatal编程技术网
  • javascript/
  • Javascript ExtJS：如何将地理位置值传递给url？

Javascript ExtJS：如何将地理位置值传递给url？

javascript extjs geolocation

Javascript ExtJS：如何将地理位置值传递给url？,javascript,extjs,geolocation,openweathermap,Javascript,Extjs,Geolocation,Openweathermap,我正在使用的是他的图书馆。在示例使用中，他定义了一个打印当前地理位置值的函数 //'MyApp.view.dash.DashController' where function defined. refreshGeoLocation : function( refresh ) { var className = '', geo; if (Ext.isClassic) { clas

我正在使用的是他的图书馆。在示例使用中，他定义了一个打印当前地理位置值的函数

//'MyApp.view.dash.DashController' where function defined.

  refreshGeoLocation : function( refresh ) {
            var className = '',
                geo;
            if (Ext.isClassic) {
                className = 'MyApp.utils.OoGeolocation';
            } else if (Ext.isModern) {
                className = 'Ext.util.Geolocation';
            }
            if (className) {
                geo = Ext.create(className, {
                    autoUpdate: false,
                    listeners: {
                        locationupdate: function (geo) {
                            console.log(geo);
                            console.log('Wait for it! Geolocation info is coming up!');
                            Ext.Msg.alert('Success', `New latitude: ${geo.getLatitude()} <br>New Longitude: ${geo.getLongitude()}`);
                            console.log(`New latitude: ${geo.getLatitude()} New Longitude: ${geo.getLongitude()}`);
                        },
                        locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                            if (bTimeout) {
                                Ext.Msg.alert('Erroe', 'Timeout occurred.');
                            } else {
                                Ext.Msg.alert('Erroe', 'Error occurred');
                            }
                        }
                    }
                });
                geo.updateLocation();
            } else {
                Ext.Msg.alert('Erroe', 'No class found');
            }
        }
更新 亲爱的@Njdhv这里是更新的代码片段

独生子女班

Ext.define("MyApp.view.weather.WeatherUtil", {
    singleton: true,
    alternateClassName: 'weatherutil',
    config: {
        latitude: 0,
        longitude: 0
    },
    constructor: function (config) {
        this.initConfig(config);
    }
});
和数据视图类

Ext.define('MyApp.view.weather.WeatherData', {
    extend: 'Ext.DataView',
    xtype: 'weatherdata',

    requires: [
        'Ext.data.reader.Json',
        'MyApp.utils.OoGeolocation', //Geolocation Library
        'MyApp.view.dash.WeatherUtil' //Singleton class
    ],
    ...
    proxy: {
            type: 'jsonp',
            url: `http://api.openweathermap.org/data/2.5/weather?lat=${weatherutil.getLatitude()}&lon=${weatherutil.getLongitude()}&units=metric&appid=9b590`,
            reader: {
                type: 'json'
            }
        },
这里是通过按钮实现功能的DashController

refreshGeoLocation: function (button) {
        var store = button.up('#weatherView').down('weatherdata').getStore();

        store.load({
            url: `http://api.openweathermap.org/data/2.5/weather?lat=${weatherutil.getLatitude()}&lon=${weatherutil.getLongitude()}&units=metric&appid=9b59049894d42af608baf69f869b9ace`,
        });
        button.setDisabled(false);
    },

    getGeolocation : function( refresh ) {
        var className = '',
            geo;
        if (Ext.isClassic) {
            className = 'MyApp.utils.OoGeolocation';
        } else if (Ext.isModern) {
            className = 'Ext.util.Geolocation';
        }
        if (className) {
            geo = Ext.create(className, {
                autoUpdate: false,
                listeners: {
                    locationupdate: function (geo) {
                        console.log(geo);
                        console.log('Wait for it! Geolocation info is coming up!');
                        //Ext.Msg.alert('Success', `New latitude: ${geo.getLatitude()} <br>New Longitude: ${geo.getLongitude()}`);
                        console.log(`New latitude: ${geo.getLatitude()} New Longitude: ${geo.getLongitude()}`);
                    },
                    locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                        if (bTimeout) {
                            Ext.Msg.alert('Error', 'Timeout occurred.');
                        } else {
                            Ext.Msg.alert('Error', 'Error occurred');
                        }
                    }
                }
            });
            geo.updateLocation();
        } else {
            Ext.Msg.alert('Error', 'No class found');
        }
    },
为此，您需要在应用程序中存储
纬度
和
经度
。您可以使用ExtJS。只要您需要，就可以在整个应用程序中访问此
singleton

我已经更新了我的库，请参阅

代码片段

单例类示例

数据视图示例，其中存储在此处

/**
*此类是应用程序的主视图。它在app.js中指定为
*“mainView”属性。该设置自动应用“视口”
*使此视图成为主体元素（即视口）的插件。
*
*TODO-替换此视图的此内容以满足应用程序的需要。
*/
Ext.define（'GeoLocation.view.main.main'{
扩展：“Ext.tab.Panel”，
xtype:'应用程序主'，
要求：[
“Ext.plugin.Viewport”，
“Ext.window.MessageBox”，
'GeoLocation.view.main.MainController'，
'GeoLocation.util.GeoLocation'
],
控制器：'主'，
用户界面：“导航”，
//tabBarHeaderPosition:1，
标题旋转：0，
tabRotation:0，
活动选项卡：0，
项目：[{
标题：“地理位置”，
iconCls:“x-fa地图”，
itemId:'地理位置'，
项目：[{
xtype:'按钮'，
文本：“检查天气”，
处理程序：“onWeatherButtonClick”
}, {
xtype:“数据视图”，
商店：{
字段：[{
名称：'摘要'，
映射：“天气[0]。主要”
}, {
名称：'说明'，
映射：“天气[0]。说明”
}],
代理：{
键入：“jsonp”，
网址：`http://api.openweathermap.org/data/2.5/weather?lat=${commonutility.getLatitude（）}&lon=${commonutility.getLatitude（）}&units=metric&appid=9b59042af608baf69f869b9ace`，
读者：{
键入：“json”
}
},
自动加载：正确
},
itemTpl:'+
'' +
“{main.temp}°；”+
“{摘要}”+
“{description}”+
''
}]
}],
听众：{
beforerender:“onMainViewRender”
}
});
希望@Njdhv能够查看这篇文章！=）亲爱的@Njdhv非常感谢您的关注和努力。“我将研究并实施你的建议。”努里安金衷心欢迎。希望这能对你有所帮助：）亲爱的@Njdhv，我用
weatherutil
名称定义了singleton类，并从代理url调用
lat=${weatherutil.getLatitude（）}&lon=${weatherutil.getLongitude（）}
，但不知怎的，当我在做
app watch
时，它总是这么说
Uncaught ReferenceError:weatherutil未定义为
singleton
类，您需要在
app.js
或
Application.js
Uncaught TypeError:button.up中使用该类。refreshGeoLocation
有关此错误，请检查
button.up（“#weatherView”）
我想你得到了
null
这就是你得到这个错误的原因。

refreshGeoLocation: function (button) {
        var store = button.up('#weatherView').down('weatherdata').getStore();

        store.load({
            url: `http://api.openweathermap.org/data/2.5/weather?lat=${weatherutil.getLatitude()}&lon=${weatherutil.getLongitude()}&units=metric&appid=9b59049894d42af608baf69f869b9ace`,
        });
        button.setDisabled(false);
    },

    getGeolocation : function( refresh ) {
        var className = '',
            geo;
        if (Ext.isClassic) {
            className = 'MyApp.utils.OoGeolocation';
        } else if (Ext.isModern) {
            className = 'Ext.util.Geolocation';
        }
        if (className) {
            geo = Ext.create(className, {
                autoUpdate: false,
                listeners: {
                    locationupdate: function (geo) {
                        console.log(geo);
                        console.log('Wait for it! Geolocation info is coming up!');
                        //Ext.Msg.alert('Success', `New latitude: ${geo.getLatitude()} <br>New Longitude: ${geo.getLongitude()}`);
                        console.log(`New latitude: ${geo.getLatitude()} New Longitude: ${geo.getLongitude()}`);
                    },
                    locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                        if (bTimeout) {
                            Ext.Msg.alert('Error', 'Timeout occurred.');
                        } else {
                            Ext.Msg.alert('Error', 'Error occurred');
                        }
                    }
                }
            });
            geo.updateLocation();
        } else {
            Ext.Msg.alert('Error', 'No class found');
        }
    },



    Ext.define('MyApp.view.dash.WeatherView', {
    extend: 'Ext.panel.Panel',
    xtype: 'weatherview',

    requires: [
        'MyApp.view.weather.WeatherData',
        'MyApp.view.weather.WeatherWindow',
        'MyApp.view.weather.WeatherUtil'
    ],

    closable: false,
    resizable: false,
    title: 'Weather',
    itemId: 'weatherView',
    iconCls: 'x-fa fa-bell',
    height: 400,

    cls: 'quick-graph-panel shadow',
    layout: 'fit',

    tools: [
        {
            type: 'refresh',
            handler: 'refreshGeoLocation'
            // listeners: {
            //     click: 'refreshGeoLocation'
            // }
        },
        {
            type: 'gear',
            handler: 'weatherWindow'
        }
    ],
    // html: 'Welcome to our weather app. Click on refresh to get the latest weather information',

    items: [{
        xtype: 'weatherdata'
    }],

    listeners: {
        beforerender: 'getGeolocation'
    }
});



Ext.define("GeoLocation.util.CommonUtility", {
    singleton: true,
    alternateClassName: 'commonutility',
    config: {
        latitude: 0,
        longitude: 0
    },
    constructor: function (config) {
        this.initConfig(config);
    }
});



/**
 * This class is the main view for the application. It is specified in app.js as the
 * "mainView" property. That setting automatically applies the "viewport"
 * plugin causing this view to become the body element (i.e., the viewport).
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('GeoLocation.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',
        'GeoLocation.view.main.MainController',
        'GeoLocation.util.Geolocation'
    ],
    controller: 'main',
    ui: 'navigation',
    //tabBarHeaderPosition: 1,
    titleRotation: 0,
    tabRotation: 0,
    activeTab: 0,
    items: [{
        title: 'Geo Location',
        iconCls: 'x-fa fa-map',
        itemId: 'geoLocation',
        items: [{
            xtype: 'button',
            text: 'Check weather',
            handler: 'onWeatherButtonClick'
        }, {
            xtype: 'dataview',
            store: {
                fields: [{
                    name: 'summary',
                    mapping: 'weather[0].main'
                }, {
                    name: 'description',
                    mapping: 'weather[0].description'
                }],
                proxy: {
                    type: 'jsonp',
                    url: `http://api.openweathermap.org/data/2.5/weather?lat=${commonutility.getLatitude()}&lon=${commonutility.getLongitude()}&units=metric&appid=9b59049894d42af608baf69f869b9ace`,
                    reader: {
                        type: 'json'
                    }
                },
                autoLoad: true
            },
            itemTpl: '<div class="weather-image-container"><img src="../../../resources/img/ico_cloud.png" alt="{summary}"/></div>' +
                '<div class="weather-details-container">' +
                '<div>{main.temp}&#176;</div>' +
                '<div>{summary}</div>' +
                '<div>{description}</div>' +
                '</div>'
        }]
    }],
    listeners: {
        beforerender: 'onMainViewRender'
    }
});