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

 更新时间:2019年05月10日 12:06:48   作者:zhy前端攻城狮  
这篇文章主要介绍了JS获取本地地址及天气的方法,结合实例形式总结分析了javascript通过浏览器、第三方API实现获取本地地址与天气的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • 微信小程序 点击控件后选中其它反选实例详解

    微信小程序 点击控件后选中其它反选实例详解

    这篇文章主要介绍了微信小程序 点击控件后选中其它反选实例详解的相关资料,需要的朋友可以参考下
    2017-02-02
  • js获取及判断键盘按键的方法

    js获取及判断键盘按键的方法

    这篇文章主要介绍了js获取及判断键盘按键的方法,涉及JavaScript键盘事件的获取及键值的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • javascript把15位身份证转成18的函数

    javascript把15位身份证转成18的函数

    非常不错的,看了这个大家就明白身份证的运算规则了
    2008-10-10
  • JS实现面包屑导航功能从零开始示例

    JS实现面包屑导航功能从零开始示例

    这篇文章主要为大家介绍了JS实现面包屑导航功能从零开始示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • 如何防止JavaScript自动插入分号

    如何防止JavaScript自动插入分号

    JavaScript语言有一个机制:在解析时,能够在一句话后面自动插入一个分号,用来修改语句末尾遗漏的分号分隔符。然而,由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突,即所有空格符都被忽略,因此程序可以利用空格格式化代码
    2015-11-11
  • js+css简单实现网页换肤效果

    js+css简单实现网页换肤效果

    这篇文章主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下
    2015-12-12
  • 微信小程序自定义用户登录弹窗

    微信小程序自定义用户登录弹窗

    这篇文章主要为大家详细介绍了微信小程序自定义用户登录弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • form+iframe解决跨域上传文件的方法

    form+iframe解决跨域上传文件的方法

    下面小编就为大家带来一篇form+iframe解决跨域上传文件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 详解CocosCreator消息分发机制

    详解CocosCreator消息分发机制

    这篇文章主要介绍了详解CocosCreator消息分发机制,详细介绍了各模块的设计,同学们一定要自己看下
    2021-04-04
  • 第二章之Bootstrap 页面排版样式

    第二章之Bootstrap 页面排版样式

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。本文给大家介绍Bootstrap 页面排版样式的相关知识,希望对大家有所帮助!
    2016-04-04

最新评论