vue天气获取，vue天气预报插件

啥也不说，先看看效果吧。

还有事件统计功能和当地天气预报功能。

这可以说是前端技术中webgis相关的知识了，本次实现是利用中国天气网API和高德地理编码API请求数据的纯前端方法。由于这个小demo需要大量的数据传输，所以我决定使用Vue框架。同样对于地图显示，openlayers是一个值得选择的开源webgis库。这个项目包括更多的openlayer添加地图。添加地图以将叠加层添加到地图。

以下代码添加地图和叠加层。

setMap:function],target:'map',view:newView,setOverlayer:functionthismapaddOverlaythisoverlay;另一个难点是异步请求api数据。由于js水平有限，我采用了es6中比较简单的async和wait结合的方法来编写。其他解决方案如生成器函数、Promise等，如何编写异步迭代，

asyncgetWeatherDataletbox=documentgetElementByIdsElementidboxappendChildimgboxappendChildtextletoly=newOverlayconsolelogthiscityweatherData[i][4]letlon=NumberthiscityweatherData[i][4]split','[0]letlat=NumberthiscityweatherData[i][4]split','[1]consoleloglon,latthismapaddOverlayolyolysetPosition[lon,lat],changeZoom表格也使用了vue的iview组件库，所以开箱即用非常方便。

这就是主要的实现过程。对js库不太了解的人可以在百度上学习如何使用。需要源码的同学可以添加“前端从入门到SP”公众号获取。

小心，不要迷路。每天都会更新大量的前端信息。

更多的vue天气获取和vue天气预报插件这种类型的相关话题讲解，各位记得关注并收藏本站。