Question

所以这是https://developer.forecast.io/docs/v2

的一个很好的例子

我想做的事情就是这样：

我有一个简单的网页，我希望显示当前预测和扩展预测。

这是我的Index.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html lang="en" class="no-js" ng-app="myApp">
    <head>
        <title>Weather Forecaster</title>
        <meta charset="UTF-8">
        <!-- favicon -->
        <link rel="shortcut icon" href="images/Oxygen-Icons.org-Oxygen-Status-weather-clear.ico" />
        <!-- END favicon -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <link href="css/jquery.jdigiclock.css" rel="stylesheet" type="text/css" />
        <link href="css/wx-custom.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
    </head>
    <body ng-controller="wxController as ctrlWx">
        <div class="container">
            <div class="row">
                <div class="col-10">
                    <div id="my-div" ng-model="myiFrame">
                        <iframe src="http://www.latlong.net/convert-address-to-lat-long.html" id="my-iframe" scrolling="no"></iframe>
                    </div>
                    <div id="plugin_container" class="forecast-panel">
                        <h1>Here's Today's Weather</h1>
                        <div class="fc forecast-panel1">
                            <p class="dayTitle">Day 1</p>
                        </div>
                        <div class="spacer"></div>
                        <div class="fc forecast-panel2">
                            <p class="dayTitle">Day 2</p>
                        </div>
                        <div class="spacer"></div>
                        <div class="fc forecast-panel3">
                            <p class="dayTitle">Day 3</p>
                        </div>
                        <div class="spacer"></div>
                        <div class="fc forecast-panel4">
                            <p class="dayTitle">Day 4</p>
                        </div>
                        <div class="spacer"></div>
                        <div class="fc forecast-panel5">
                            <p class="dayTitle">Day 5</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/angular/angular.min.js" type="text/javascript"></script>
        <script src="js/angular/app.js" type="text/javascript"></script>
        <script src="js/angular/controller.js" type="text/javascript"></script>
        <script src="js/angular/services.js" type="text/javascript"></script>
        <script src="js/angular/ang-custom.js" type="text/javascript"></script>
    </body>
</html>

注意＆＃34; IFRAME＆＃34; .... src是这样的：http://www.latlong.net/convert-address-to-lat-long.html

现在，如果你去那里，这很酷，你可以把任何地址放到该地址的LAT LON：

这里有一个屏幕截图，其中有来自DC的示例LAT LON ......怀特豪斯。

好了，现在，我的代码使用Angular和一个简单的控制器和服务......

下面：

APP：

/* global angular */
// Code goes here
var myApp;
myApp = angular.module("myApp", []);
myApp.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
});
console.log("Host name is: " + document.location.hostname);
//if (document.location.hostname === "localhost") {
//    myApp.constant('URL', '/WeatherForecaster/js/json/');
//} else if (document.location.hostname === "omnimanger.co/wx" || "www.omnimanager.co/wx") {
//    myApp.constant('URL', '/js/json/');
//} else {
//    myApp.constant('URL', '/wx/js/json/');
//}
myApp.constant("URL", {
   //Default LAT/LON for CONCRETE 
   apiKey: "3bb0f0fe93c92922f0b42f9eabda48d0/",
   lat: "48.530031",
   lon: ",-121.879460",
   country: "us",
   uri: "https://api.forecast.io/forecast/"
}).config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});;

myApp.constant("wx", {
    data: {
        latitude: 0,
        longitude: 0,
        currently: {},
        minutely: {
            summary: "",
            icon: "",
            data: []
        },
        hourly: {
            summary: "",
            icon: "",
            data: []
        },
        daily: {
            summary: "",
            icon: "",
            data: []
        },
        flags: {
            sources: [],
            "lamp-stations": [],
            "isd-stations": [],
            "madis-stations": [],
            units: ""
        }
    }
});

控制器：

'use strict';
myApp.controller('wxController', function (wxDataService) {

    var ctrlWx = this;
    //Listen for the Submit (FIND) button on the iFrame

    ctrlWx.content = {};
    console.log("LAT/LON: ", ctrlWx.latlon);
    ctrlWx.fetchWx = function () {
        //General Data
        wxDataService.getWxData().then(function (result) {
            ctrlWx.content = result;
            console.log("All Data: ", result);
        });
    };
    ctrlWx.fetchWx();

});

SERVICE：

myApp.factory('wxDataService', function ($http, URL) {

    console.log("URL", URL);

        //DEFAULT Headers for KEY and AUTH TOKEN
    var headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': ['GET', 'POST'],
        'Access-Control-Allow-Headers': 'Content-Type',
        'Content-Type': 'application/json'
    };
    var myURL = {
        data: {
            header: headers,
            uri: URL.uri + URL.apiKey + URL.lat + URL.lon
        }
    };

    var getWxData = function () {
        return $http.get(myURL)
                .success(function (data) {
                    console.log("SUCCESS!");
                    console.log("The Weather Data is here: " + data);
                    return data;
                })
                .error(function (e) {
                    console.log("He\'s dead Jim!<br>", e);
                    return e;
                });
    };
    return {
        getWxData: getWxData
    };
});

解决方案我试图实现：

当用户输入地址并点击＆＃34;查找＆＃34;按钮，生成LAT LON，我想在IFRAME中捕获LAT LON。

这就是我想要做的事情，但我知道我需要制定一个指令，然后点击＆＃34;点击＆＃34;或者＆＃34;提交＆＃34;事件到FIND按钮。我下面的内容不是那个;爱好。

var latlon = {};
$(function () {
    $('#my-iframe').load(function () {

        $(this).contents().find("#latlongform, #gadres").live('blur', function (e) {
            latlon = {
                mylat: $("input[name='lat']").val(),
                mylon: $("input[name='lon']").val()
            };
            if (e) {
                console.log("Err: ", e);
                return e;
            }
        });
    });
});

GIVENS：

FORM和LAT LON如下：

    <div class="row">
        <div class="col-8 graybox">
            <form id="latlongform">
                <label for="gadres">Address</label>
                <input id="gadres" type="text" class="width70" placeholder="Type address here to get lat long" required="">
                <button title="Find lat long coordinates" class="button">Find</button><br>
                <small>Write city name with country code for better results.</small>
            </form>
            <div class="row">
                <div class="col-6 m2">
                    <label for="lat">Latitude</label>
                    <input type="text" name="lat" id="lat" placeholder="lat coordinate">
                </div>
                <div class="col-6 m2">
                    <label for="lng">Longitude</label>
                    <input type="text" name="lng" id="lng" placeholder="long coordinate">
                </div>
            </div>
        </div>
    </div>

问题：

我如何获得LAT LON，＆＃34; AFTER＆＃34;用户单击FIND，然后触发我的角度服务以将CALL注入到获取天气数据的URL ...如上所述。这是天气数据JSON OBJECT。它使用API KEY，每天限制使用1000次。

如果您想查看天气API的结果，您需要获得免费的API_KEY ....每天点击1000次...

谢谢大家，我希望你能做到这一切这是一个有效的问题。

Answer 1

使用JSONP

访问Forecast.io API

forecast.io网站不支持GET操作的CORS（跨源资源共享），但它确实支持JSONP。

修订代码

var url = myURL.data.uri;
var jsonpURL = url+"?callback=JSON_CALLBACK";

var getWxData = function () {
    return $http.jsonp(jsonpURL)
        .then(function (response) {
            console.log("SUCCESS!");
            console.log(response.data);
            //return to chain data
            return response.data;
        })
        .catch(function (e) {
            console.log("He\'s dead Jim!");
            console.log(e);
            //throw to chain rejection
            throw e;
        });
};

样本结果

LAT: 48.530031
LOG: -121.87946
TIMEZONE: America/Los_Angeles
SUMMARY: Partly Cloudy
TEMP: 56.02

DEMO on JSFiddle。

请注意，我已将.success和.error方法分别更改为.then和.catch。这些旧方法是deprecated和忽略返回值。

当＆＃34;提交＆＃34;单击按钮以获取值

1 个答案:

使用JSONP

修订代码

样本结果