JS獲取本地地址及天氣的方法實(shí)例小結(jié)

更新時(shí)間：2019年05月10日 12:06:48 作者：zhy前端攻城獅

這篇文章主要介紹了JS獲取本地地址及天氣的方法,結(jié)合實(shí)例形式總結(jié)分析了javascript通過(guò)瀏覽器、第三方API實(shí)現(xiàn)獲取本地地址與天氣的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS獲取本地地址及天氣的方法。分享給大家供大家參考，具體如下：

一、獲取本地的地址

第一種方式：

1、利用瀏覽器獲取當(dāng)前位置的經(jīng)緯度

window.onload=getCurrentPosition;
//瀏覽器獲取當(dāng)前位置
function getCurrentPosition() {
  if (window.navigator.geolocation) {
    var options = {
      enableHighAccuracy: true,
    };
    window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
  }else {
    alert("瀏覽器不支持html5來(lái)獲取地理位置信息");
  }
}

2、瀏覽器獲取到的是GPS坐標(biāo)，需要轉(zhuǎn)換成城市名稱(chēng)再通過(guò)城市獲取天氣：

//成功獲取時(shí)調(diào)用的函數(shù)
function handleSuccess(position) {
  // 獲取到當(dāng)前位置經(jīng)緯度 本例中獲取到的是gps坐標(biāo)系
  //經(jīng)度
  var lng = position.coords.longitude;
  //緯度
  var lat = position.coords.latitude;
  //轉(zhuǎn)換成百度坐標(biāo)系
  //將請(qǐng)求發(fā)送給‘
  var ggPoint = new BMap.Point(lng, lat);
  //地圖初始化
  var bm = new BMap.Map();
  //坐標(biāo)轉(zhuǎn)換完之后的回調(diào)函數(shù)
  translateCallback = function (data) {
    if (data.status === 0) {//回調(diào)成功
      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);
      //將經(jīng)緯度轉(zhuǎn)換成城市
      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;
  //將轉(zhuǎn)換之后的城市傳入獲取天氣的函數(shù)做參數(shù)
  getWeatherDatas(city);
  return city;
}
function handleError() {
  log('地點(diǎn)定位出錯(cuò)');
}

第二種方式：

1、利用百度API通過(guò)IP地址獲取本地地址

//通過(guò)百度的 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("當(dāng)前定位城市:"+cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);

2、通過(guò)城市獲取天氣數(shù)據(jù)：

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', //這里需要改成自己的應(yīng)用的密鑰secret，
        "area":city
      },
      jsonp: 'jsonpcallback', //這個(gè)方法名很重要,不能改變
      error: function(XmlHttpRequest, textStatus, errorThrown) {
        log("操作失敗，請(qǐng)重試！"+errorThrown);
      },
      success: function(result) {
        //解析獲取到的天氣數(shù)據(jù)
        console.log('The Weather datas: ',result);
      }
    });
  }
}

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專(zhuān)題：《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》及《JavaScript字符與字符串操作技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: