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 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
js模糊查询实例分享
Dec 26 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
js实现模糊匹配功能
Feb 15 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
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
MySQL修改密码方法总结
2008/03/25 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
Python代码调试的几种方法总结
2015/04/15 Python
python实现矩阵乘法的方法
2015/06/28 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
简单实现python收发邮件功能
2018/01/05 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
Python错误的处理方法
2020/06/23 Python
Django封装交互接口代码
2020/07/12 Python
个人作风剖析材料
2014/02/02 职场文书
《王二小》教学反思
2014/02/27 职场文书
法制宣传月活动方案
2014/05/11 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
如何写早恋检讨书
2014/09/10 职场文书
学生检讨书范文
2014/10/30 职场文书
2014年公司工作总结
2014/11/22 职场文书
单位同意报考证明
2015/06/17 职场文书
放飞理想主题班会
2015/08/14 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Python如何识别银行卡卡号?
2021/06/10 Python