视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS获取本地地址及天气的方法实例小结
2020-11-27 21:57:12 责编:小采
文档


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

下载本文
显示全文
专题