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);
            }
        });
    }

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值