angular实现对百度天气api跨域请求-优快云博客

本文介绍如何使用百度地图API查询天气信息，通过AngularJS模块化应用程序实现天气数据的实时更新和展示，包括温度、天气状况及昼夜图片切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

申请秘钥：http://lbsyun.baidu.com/apiconsole/key ，有个百度账号就行ak=开发者秘钥

url地址：http://api.map.baidu.com/telematics/v3/weather?location=北京%E5%8C%97%E4%BA%AC&output=json&ak=tQydkkwXfEtSNgvAEHUr1v6u0GbXUvZo&&callback=JSON_CALLBACK

 1 var app=angular.module('app',[]);
 2 // //天气
 3 app.controller('weather',function ($scope,$http){
 4     $scope.t1= '北京';
 5     $scope.$watch('t1',function (){
 6         $http.jsonp('http://api.map.baidu.com/telematics/v3/weather?location='+$scope.t1+'&output=json&ak=tQydkkwXfEtSNgvAEHUr1v6u0GbXUvZo&callback=JSON_CALLBACK').success(function (data){
 7             $scope.lightNight='';//白天或者黑夜的图片
 8             $scope.city=data.results[0].currentCity;
 9             $scope.temperature = data.results[0].weather_data[0].temperature;
10             //白天黑夜
11             var oDate = new Date();
12             var oH = oDate.getHours();
13             if (oH > 6 && oH < 18) {
14                 $scope.lightNight = data.results[0].weather_data[0].dayPictureUrl;
15             }else{
16                 $scope.lightNight = data.results[0].weather_data[0].nightPictureUrl;
17             }
18         });
19     });
20 });