小编给大家分享一下在Html5如何获取高德地图定位的天气，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

注：使用的是的模块注入方式，适用各种前端单页面应用及H5

创建一个AMap.js文件：

//AMap.js//高德maphttps://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的keyexportdefaultfunctionMapLoader(){returnnewPromise((resolve,reject)=>{if(window.AMap){resolve(window.AMap)}else{varscript=document.createElement('script')script.type='text/javascript'script.async=true//这里引入的是全部模块，或者按需要模块引入，加参数plugin=“模块名”script.src='http://webapi.amap.com/maps?v=1.4.11&callback=initAMap&key=6747cb97****************7e774b4b62'//你的高德应用AK（申请参考官方文档）script.onerror=rejectdocument.head.appendChild(script)''}window.initAMap=()=>{resolve(window.AMap)}})}

使用

vue 示例：

importMapLoaderfrom'@/common/SDK/AMap.js'MapLoader().then(AMap=>{//加载定位插件AMap.plugin(['AMap.Geolocation','AMap.Weather'],function(){vargeolocation=newAMap.Geolocation({//是否使用高精度定位，默认：trueenableHighAccuracy:true,//设置定位超时时间，默认：无穷大timeout:10000,//定位按钮的停靠位置的偏移量，默认：Pixel(10,20)buttonOffset:newAMap.Pixel(10,20),//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy:true,//定位按钮的排放位置,RB表示右下buttonPosition:'RB'})geolocation.getCurrentPosition()AMap.event.addListener(geolocation,'complete',onComplete)AMap.event.addListener(geolocation,'error',onError)varweather=newAMap.Weather();functiononComplete(data){//data是具体的定位信息that.$store.dispatch('UPDATE_ADDRESS',data.formattedAddress)//weather.getForecast(data.addressComponent.adcode,function(err,data){//console.log(err,data);//});weather.getLive(data.addressComponent.adcode,function(err,data){//console.log(err,data);letobj={adcode:"330100",//区域编码city:"杭州市",//城市humidity:"92",//空气湿度（百分比）info:"OK",//状态province:"浙江",//省份reportTime:"2019-12-2419:55:48",temperature:10,//实时气温，单位：摄氏度weather:"阴",//天气预报windDirection:"东",//风向，风向编码对应描述windPower:"≤3",//风力，风力编码对应风力级别，单位：级}letweatherObj={date:`${that.$moment().format('MM月DD日')}`,week:`${that.$moment().format('d')}`,temperature:data.temperature,currentCity:data.city,weatherDesc:data.weather}that.$store.dispatch("UPDATE_Weather",weatherObj)});}functiononError(data){//定位出错if(data.info=='NOT_SUPPORTED'){uni.showModal({title:'提示',content:'当前浏览器不支持定位功能'||'定位失败'})}elseif(data.info=='FAILED'){uni.showModal({title:'提示',content:data.message||'定位失败'})}}})},e=>{console.log('地图加载失败',e)})}

看完了这篇文章，相信你对“在Html5如何获取高德地图定位的天气”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！