高德地图API实现天气查询
生活随笔
收集整理的這篇文章主要介紹了
高德地图API实现天气查询
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
核心：
1.在高德地圖注冊(cè)開(kāi)發(fā)者賬號(hào)，獲取key，取得調(diào)用API權(quán)限（用于個(gè)人學(xué)習(xí)的話(huà)，不用花錢(qián)的）
2.查看官方文檔和demo，學(xué)習(xí)使用方法
——通過(guò)調(diào)用API，高德的服務(wù)器會(huì)傳回一些帶有天氣數(shù)據(jù)的對(duì)象，我們?cè)購(gòu)膶?duì)象中取所需數(shù)據(jù)即可
3.HTML或PHP文件不能在本地直接打開(kāi)，要在服務(wù)器中打開(kāi)（才會(huì)有與高德服務(wù)器通訊）
下面的代碼是用php寫(xiě)的：（有注釋幫助閱讀）
<!doctype html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>天氣查詢(xún)</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/><link rel="stylesheet" href="https://cache.amap.com/lbs/static/AMap.PlaceSearchRender1120.css"/><style>#panel {z-index: 999;position: absolute;background-color: white;max-height: 100%;overflow-y: auto;right: 0;width: 280px;}</style><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6f8080901bb99109c5b56f60a4cd2bed&plugin=AMap.PlaceSearch"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/PlaceSearchRender.js"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><style>html,body,#container{height:100%;width:100%;}.btn{width:10rem;margin-left:6.8rem; }</style><script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6f8080901bb99109c5b56f60a4cd2bed&plugin=AMap.Geocoder"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/PlaceSearchRender.js"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> </head>//以上引入的是天氣查詢(xún)API所需JS文件和css樣式文件<body> <div id="container"></div> //地圖放在這個(gè)div里<div class="input-card" style='width:28rem;'> //用于查詢(xún)具體城市的input文本輸入框和按鈕<input type="text" id="city_name"><input type="button" name="gan" onclick="f()" value="查詢(xún)"> </div> <script type="text/javascript"> var map = new AMap.Map("container", { //new新的對(duì)象，加載新地圖到名為container的div中，也就是上幾行注釋所言resizeEnable: true}); AMap.plugin('AMap.CitySearch', function () { //自動(dòng)索取ip地圖定位，即你的網(wǎng)絡(luò)ip是哪，地圖中心就會(huì)初始化到哪var citySearch = new AMap.CitySearch()citySearch.getLocalCity(function (status, result) {if (status === 'complete' && result.info === 'OK') {}}) })function f(){ //點(diǎn)擊事件AMap.service('AMap.PlaceSearch',function(){ //沒(méi)有constructor，一個(gè)是引入key 一個(gè)是要有這個(gè)的聲明var placeSearch = new AMap.PlaceSearch(); //用PlaceSearch獲取所查詢(xún)城市的信息，我們主要要從中獲取經(jīng)緯度，用于下面把視窗的中心定位到所查詢(xún)城市placeSearch.search(document.getElementById('city_name').value, function (status, result) { //函數(shù)獲取帶有坐標(biāo)的對(duì)象// 查詢(xún)成功時(shí)，result即對(duì)應(yīng)匹配的信息console.log(result)var pois = result.poiList.pois; //位置是以數(shù)組的形式傳回來(lái)的，下面取pois[0]就是所查詢(xún)城市的經(jīng)緯度AMap.plugin('AMap.Weather', function() {//創(chuàng)建天氣查詢(xún)實(shí)例var weather = new AMap.Weather();//這個(gè)對(duì)象可以查詢(xún)指定城市的天氣信息（前面那個(gè)PlaceSearch對(duì)象是可以查詢(xún)到經(jīng)緯度）weather.getLive(document.getElementById('city_name').value, function(err, data) { //獲取所查詢(xún)城市//console.log(err, data); 可在console面板查看API傳回對(duì)象中的信息AMap.plugin('AMap.Weather', function() {var weather = new AMap.Weather();//查詢(xún)實(shí)時(shí)天氣信息, 查詢(xún)的城市到行政級(jí)別的城市，如朝陽(yáng)區(qū)、杭州市weather.getLive(document.getElementById('city_name').value, function(err, data) {if (!err) {var str = []; //天氣信息就保存在data對(duì)象中，要啥取啥str.push('<h4 >實(shí)時(shí)天氣' + '</h4><hr>');str.push('<p>城市/區(qū)：' + data.city + '</p>');str.push('<p>天氣：' + data.weather + '</p>');str.push('<p>溫度：' + data.temperature + '℃</p>');str.push('<p>風(fēng)向：' + data.windDirection + '</p>');str.push('<p>風(fēng)力：' + data.windPower + ' 級(jí)</p>');str.push('<p>空氣濕度：' + data.humidity + '</p>');str.push('<p>發(fā)布時(shí)間：' + data.reportTime + '</p>');var marker = new AMap.Marker({map: map, position: pois[0].location}); //這個(gè)是標(biāo)記地點(diǎn)的藍(lán)色的那個(gè)符號(hào)var infoWin = new AMap.InfoWindow({ //這個(gè)對(duì)象可以對(duì)視窗進(jìn)行移動(dòng)操作——根據(jù)所提供經(jīng)緯度可以把視窗的中心移動(dòng)到指定城市content: '<div class="info" style="position:inherit;margin-bottom:0;">'+str.join('')+'</div><div class="sharp"></div>',isCustom:true,offset: new AMap.Pixel(0, -37)});map.setCenter(marker.getPosition()); //設(shè)置地圖中心infoWin.open(map, marker.getPosition()); marker.on('mouseover', function() { infoWin.open(map, marker.getPosition()); //把視窗交點(diǎn)移動(dòng)到所查詢(xún)城市});}});});}); });})});}</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的高德地图API实现天气查询的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： MAX40026 280ps高速比较器
- 下一篇： 一加手机换鸿蒙os,一加手机支持氢OS和