5

小程序调用百度地图API

创建百度应用

百度地图开放平台控制台中创建应用
![image.png](/img/bVbBVkP)
记得要绑定真实的APPID,会由此生成访问应用的AK

如何使用

设置小程序请求合法域名 (服务域名)
引入百度api  SDK-wx.js  官方网站上有资源
// 引用百度地图微信小程序JSAPI模块  
var bmap \=  require('../../libs/bmap-wx.js');  
Page({ 
    globalData:{ 
        BMap: null,
        baiduKey: 'uKYgmr******************Hq3',//你的AK
        addressName: null, //地址
        currentWeather: { //天气
        }, 
    }, 
    onLaunch:function(){  
        var that \=  this; // 新建百度地图对象  
        that.globalData.BMap = new bmap.BMapWX({
            ak: that.globalData.baiduKey
        });
    },
    onShow:function(){
        var that = thisthat
        that.globalData.BMap.regeocoding({
            iconPath: '../../static/icon-logo.png',
            iconTapPath: '../../static/icon-logo.png',
            success: (data) => {
                this.globalData.addressName = data.wxMarkerData[0].address
            }
        })
        that.globalData.BMap.weather({
            success: (data) => {
                let {
                    currentWeather,
                    originalData
                } = data
                let weatherObj = {}
                //这是格式化数据可以不参考
                let hour = new Date().getHours() //判断白天还是 黑天
                weatherObj.currentCity = currentWeather[0].currentCity //城市
                weatherObj.weatherDesc = currentWeather[0].weatherDesc //天气描述
                weatherObj.date = currentWeather[0].date.split("(")[0] //时间
                weatherObj.temperature = currentWeather[0].date.split("(")[1].split(")")[0].split(":")[1].split("℃")[0] //实时温度
                weatherObj.pictureUrl = hour > 19 && hour < 7 ? originalData.results[0].weather_data[0].nightPictureUrl :
                    originalData.results[0].weather_data[0].dayPictureUrl
                this.globalData.currentWeather = weatherObj;
                console.log(weatherObj)
            }
        })
    }
})

接下来就是页面展示了,这里只是简单应用,如果有复杂需求,或者用到地图应用,可能话会继续深究更新。

感谢点赞,转载注明出处


叶为花而生
164 声望5 粉丝

一个在前端道路上愈走愈远的花花