JS获取本地地址及天气的方法实例小结


Posted in Javascript onMay 10, 2019

本文实例讲述了JS获取本地地址及天气的方法。分享给大家供大家参考,具体如下:

一、获取本地的地址

第一种方式:

1、利用浏览器获取当前位置的经纬度

window.onload=getCurrentPosition;
//浏览器获取当前位置
function getCurrentPosition() {
  if (window.navigator.geolocation) {
    var options = {
      enableHighAccuracy: true,
    };
    window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
  }else {
    alert("浏览器不支持html5来获取地理位置信息");
  }
}

2、浏览器获取到的是GPS坐标,需要转换成城市名称再通过城市获取天气:

//成功获取时调用的函数
function handleSuccess(position) {
  // 获取到当前位置经纬度 本例中获取到的是gps坐标系
  //经度
  var lng = position.coords.longitude;
  //纬度
  var lat = position.coords.latitude;
  //转换成百度坐标系
  //将请求发送给‘
  var ggPoint = new BMap.Point(lng, lat);
  //地图初始化
  var bm = new BMap.Map();
  //坐标转换完之后的回调函数
  translateCallback = function (data) {
    if (data.status === 0) {//回调成功
      var marker = new BMap.Marker(data.points[0]);
      var myGeo = new BMap.Geocoder();
      var baiduPoint = new BMap.Point(data.points[0].lng, data.points[0].lat);
      //将经纬度转换成城市
      myGeo.getLocation(baiduPoint, getCityByCoordinate);
    }
  }
  setTimeout(function () {
    var convertor = new BMap.Convertor();
    var pointArr = [];
    pointArr.push(ggPoint);
    convertor.translate(pointArr, 3, 5, translateCallback)
  }, 2000);
}
function getCityByCoordinate(result) {
  var gpsAadress=result.addressComponents;
  var city=gpsAadress.city;
  //将转换之后的城市传入获取天气的函数做参数
  getWeatherDatas(city);
  return city;
}
function handleError() {
  log('地点定位出错');
}

第二种方式:

1、利用百度API通过IP地址获取本地地址

//通过百度的 IP地址获取本地地址
window.onload=getCurrentPosit;
  function getCurrentPosit() {
    var map = new BMap.Map('getCity');
    function myFun(result){
      var cityName = result.name;
      getWeatherDatasFun(cityName);
      map.setCenter(cityName);
      alert("当前定位城市:"+cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);

2、通过城市获取天气数据:

function getWeatherDatas(city) {
  var url='http://route.showapi.com/9-2?';
  if(city===undefined || city===""){
    log('您还未输入')
  }else {
    $.ajax({
      type: 'post',
      url: url,
      dataType: 'jsonp',
      data: {
        "showapi_timestamp": new Date().getTime(),
        "showapi_appid": '44277', //这里需要改成自己的appid
        "showapi_sign": '9987d6dff19e482488b33dc8ed70f6e9', //这里需要改成自己的应用的密钥secret,
        "area":city
      },
      jsonp: 'jsonpcallback', //这个方法名很重要,不能改变
      error: function(XmlHttpRequest, textStatus, errorThrown) {
        log("操作失败,请重试!"+errorThrown);
      },
      success: function(result) {
        //解析获取到的天气数据
        console.log('The Weather datas: ',result);
      }
    });
  }
}

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
复制本贴标题和地址的js代码
Jul 01 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 #Javascript
vue无限轮播插件代码实例
May 10 #Javascript
js中的深浅拷贝问题简析
May 10 #Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 #Javascript
详解jQuery如何实现模糊搜索
May 10 #jQuery
JS匿名函数内部this指向问题详析
May 10 #Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 #Javascript
You might like
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
实例讲解Python中函数的调用与定义
2016/03/14 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
农业项目建议书
2014/08/25 职场文书
公司开业致辞
2015/07/29 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
golang语言指针操作
2022/04/14 Golang