H5天气查询demo(二)
最近刚好有空,学长帮忙让做个毕设,于是我提到了那个基于H5地理位置实现天气查询的方法,学长听了也觉得不错,于是就这个主题,扩展了一下,做了一个航班管理查询系统,为上次博客中提到的利用H5 api中的经纬度应用做了一个例子。这边也贴上部分代码简单提下思路。
首先网站框架:bootstarp+less+ajax(交互方法)+php+mysql 搭建在sae平台上,文章结束贴上demo地址
$(document).ready(function(){
$("#myCarousel").carousel('cycle');
locationAndWeather();
initEvent();
initText();
});
var loginLog=1;
var searchName;
var searchLog=1;
function locationAndWeather(localName){
if(localName){
weather(localName);
}else{
//h5 经纬度的获取
var lat,lon,cityname=new Array;
getLocation();
function getLocation(){
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{alert("未获取到您的地理位置,请确认您是手机访问,且允许开启地理位置访问")}
} function showPosition(position){
//console.log(position.coords.latitude+"!!!"+position.coords.longitude)
lat=position.coords.latitude;
lon=position.coords.longitude;
//alert(lat+"!!"+lon); // 百度地图API功能
var point = new BMap.Point(lon, lat);
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
cityname=addComp.city.split("市");
$(".location_name").html(cityname[0]);
//天气模块
weather(cityname[0]);
});
}
}
}
上述代码主要实现一个经纬度获取(当然h5的api只能在手机端实现),随即传入百度api中提供的BMap.Point函数,然后刷刷刷,就可以得到我们的城市名(不要问我为什么这么写,详情请见官方api说明文档),得到的城市名随即给到我们的weather函数
//查询天气
var msgLog;
function weather(cityName,mode){
var url="http://api.openweathermap.org/data/2.5/weather?q="+cityName+"&callback=msg&appid=398ae2a4c5112f3604756bf1403e58b1";
var scr=document.createElement('script');
scr.setAttribute('type','text/javascript');
scr.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(scr);
}
//回调函数
function msg(data){
console.log("----------------------");
console.log(data);
console.log(data.weather[0].main);
console.log("----------------------");
var local_weather=data.weather[0].main;
if(searchLog==2){
$(".search_name").html(searchName);
$(".search_weather").html(local_weather);
}else{
$(".location_weather").html(local_weather);
}
}
这边呢因为Openweather官方给的建议是用JsonP拿到数据,或者不嫌麻烦PHP CURL也随意。JsonP的原理,想必大家也知道,说白了就是个回调函数作为src文件引入,这样避免了跨域的问题,当然这个项目唯一美中不足的可能是Open weather返回的json串都是英文。博主也考虑过用有道的英译汉api,但是摸摸百度了下,貌似要钱==征求了下学长建议后还是放弃了,大家如果有更多免费的英译汉api可以留言告诉博主哦。
这边贴上sae链接:11.xiaoweiwei.sinaapp.com/plane 过段时间可能会把代码统一移植,如果这串链接失效的话,大家可以看看评论区。博主会更新链接的,希望对大家有所帮助,记得要手机访问哟,而且要确定共享地理位置
H5天气查询demo(二)的更多相关文章
- android天气查询(二)之网络json数据的获取
前面一篇文章介绍了如何使用ksoap获取天气信息,但是使用的网络资源受到了限制,所以我们这里会采用第二种方法,可以无限制的获取.http://m.weather.com.cn/data/1010101 ...
- 关于实现手机端自动获取天气的demo
博主大二做的一个项目,当时很傻很天真,但是还是贴出来,希望能给大家一点帮助.欢迎转载哦!我的博客园地址:http://www.cnblogs.com/natureless/ 首先分析需求,移动端实现天 ...
- IOS CoreData 多表查询demo解析
在IOS CoreData中,多表查询上相对来说,没有SQL直观,但CoreData的功能还是可以完成相关操作的. 下面使用CoreData进行关系数据库的表与表之间的关系演示.生成CoreData和 ...
- 根据中国气象局提供的API接口实现天气查询
中国气象局提供了三个天气查询的API接口: [1]http://www.weather.com.cn/data/sk/101190101.html [2]http://www.weather.com. ...
- 05_天气查询_JAX-WS方式_客户端
[客户端特点] 支持面向对象开发. 客户端功能调用webService,首先得知道WebService的地址. 一般情况下,只要知道了wsdl的地址,就可以知道WebService的地址. 我们上一篇 ...
- Android解析中国天气接口JSon数据,应用于天气查询!
android解析Json数据是比较常见的一种操作.也是客户端和服务器进行数据交互的桥梁.下面就来看一看在android中解析JSon数据的方法吧. 首先要想获得Json数据,就必须访问相关的网络接口 ...
- 如何使用AEditor制作一个简单的H5交互页demo
转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...
- 小工具:天气查询 Vs自定义设置 DevGridControl中GridView排序问题 小工具:火车票查询 小工具:邮件发送 小工具:截图&简单图像处理
小工具:天气查询 开发一个天气查询的工具主要由两步构成,一是数据的获取,二是数据的展示. 一.数据获取 数据获取又可以分为使用其它公司提供的API和手动抓取其它网站数据. 1. 某公司提供的AP ...
- 爬虫系列(八) 用requests实现天气查询
这篇文章我们将使用 requests 调用天气查询接口,实现一个天气查询的小模块,下面先贴上最终的效果图 1.接口分析 虽然现在网络上有很多免费的天气查询接口,但是有很多网站都是需要注册登陆的,过程比 ...
随机推荐
- App你真的需要么
随着智能手机.移动路联网的普及,APP火的一塌糊涂,APP应用可谓五花八门,街上经常看到各种推广:扫码安装送东西,送优惠券.仿佛一夜之间一个企业没有自己的APP就跟不上时代了. 有时我在想:APP,你 ...
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- Hadoop学习之旅二:HDFS
本文基于Hadoop1.X 概述 分布式文件系统主要用来解决如下几个问题: 读写大文件 加速运算 对于某些体积巨大的文件,比如其大小超过了计算机文件系统所能存放的最大限制或者是其大小甚至超过了计算机整 ...
- 搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 (1)
搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 原文地址(英文):http://www.networkcomms.net/creating ...
- .NET应用程序域
在.NET平台下,可执行程序并没有直接承载在Windows进程中,而非托管程序是直接承载的..NET可执行程序承载在进程的一个逻辑分区中,称之为应用程序域(AppDomain).一个进程可以包含多个应 ...
- WPF CheckBox 样式
<Style x:Key="FocusVisual"> <Setter Property="Control.Template"> < ...
- 电信计费业务:预后融合OCS到底应该实扣还是虚扣?
引入OCS的初衷之一是为了让计费系统能够参与到用户的通讯控制中来,也就是所谓的实时信控.用户在没有余额时,通讯就会被停止,不会造成"天价欠费 ",一方面保障用户的利益,一方面也保障 ...
- Java 教程整理:基础、项目全都有
Java 在编程语言排行榜中一直位列前排,可知 Java 语言的受欢迎程度了. 网上有很多 Java 教程,无论是基础入门还是开发小项目的教程都比比皆是,可是系统的很少,对于Java 学习者来说找到系 ...
- 关于《Linux.NET学习手记(8)》的补充说明
早前的一两天<Linux.NET学习手记(8)>发布了,这一篇主要是讲述OWIN框架与OwinHost之间如何根据OWIN协议进行通信构成一套完整的系统.文中我们还直接学习如何直接操作OW ...
- MonoTouch 二三事(三)mono mkbundle 打包程序的解包支持
2014.10.06 更新 编写了 IDA Pro 的插件,用来解包和打包 mkbundle程序,请参见 https://github.com/binsys/MKBundleManager 许久以后, ...