高德地图API实现天气查询
生活随笔
收集整理的這篇文章主要介紹了
高德地图API实现天气查询
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
核心：
1.在高德地圖注冊開發者賬號，獲取key，取得調用API權限（用于個人學習的話，不用花錢的）
2.查看官方文檔和demo，學習使用方法
——通過調用API，高德的服務器會傳回一些帶有天氣數據的對象，我們再從對象中取所需數據即可
3.HTML或PHP文件不能在本地直接打開，要在服務器中打開（才會有與高德服務器通訊）
下面的代碼是用php寫的：（有注釋幫助閱讀）
<!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>天氣查詢</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>//以上引入的是天氣查詢API所需JS文件和css樣式文件<body> <div id="container"></div> //地圖放在這個div里<div class="input-card" style='width:28rem;'> //用于查詢具體城市的input文本輸入框和按鈕<input type="text" id="city_name"><input type="button" name="gan" onclick="f()" value="查詢"> </div> <script type="text/javascript"> var map = new AMap.Map("container", { //new新的對象，加載新地圖到名為container的div中，也就是上幾行注釋所言resizeEnable: true}); AMap.plugin('AMap.CitySearch', function () { //自動索取ip地圖定位，即你的網絡ip是哪，地圖中心就會初始化到哪var citySearch = new AMap.CitySearch()citySearch.getLocalCity(function (status, result) {if (status === 'complete' && result.info === 'OK') {}}) })function f(){ //點擊事件AMap.service('AMap.PlaceSearch',function(){ //沒有constructor，一個是引入key 一個是要有這個的聲明var placeSearch = new AMap.PlaceSearch(); //用PlaceSearch獲取所查詢城市的信息，我們主要要從中獲取經緯度，用于下面把視窗的中心定位到所查詢城市placeSearch.search(document.getElementById('city_name').value, function (status, result) { //函數獲取帶有坐標的對象// 查詢成功時，result即對應匹配的信息console.log(result)var pois = result.poiList.pois; //位置是以數組的形式傳回來的，下面取pois[0]就是所查詢城市的經緯度AMap.plugin('AMap.Weather', function() {//創建天氣查詢實例var weather = new AMap.Weather();//這個對象可以查詢指定城市的天氣信息（前面那個PlaceSearch對象是可以查詢到經緯度）weather.getLive(document.getElementById('city_name').value, function(err, data) { //獲取所查詢城市//console.log(err, data); 可在console面板查看API傳回對象中的信息AMap.plugin('AMap.Weather', function() {var weather = new AMap.Weather();//查詢實時天氣信息, 查詢的城市到行政級別的城市，如朝陽區、杭州市weather.getLive(document.getElementById('city_name').value, function(err, data) {if (!err) {var str = []; //天氣信息就保存在data對象中，要啥取啥str.push('<h4 >實時天氣' + '</h4><hr>');str.push('<p>城市/區：' + data.city + '</p>');str.push('<p>天氣：' + data.weather + '</p>');str.push('<p>溫度：' + data.temperature + '℃</p>');str.push('<p>風向：' + data.windDirection + '</p>');str.push('<p>風力：' + data.windPower + ' 級</p>');str.push('<p>空氣濕度：' + data.humidity + '</p>');str.push('<p>發布時間：' + data.reportTime + '</p>');var marker = new AMap.Marker({map: map, position: pois[0].location}); //這個是標記地點的藍色的那個符號var infoWin = new AMap.InfoWindow({ //這個對象可以對視窗進行移動操作——根據所提供經緯度可以把視窗的中心移動到指定城市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()); //設置地圖中心infoWin.open(map, marker.getPosition()); marker.on('mouseover', function() { infoWin.open(map, marker.getPosition()); //把視窗交點移動到所查詢城市});}});});}); });})});}</script> </body> </html>總結
以上是生活随笔為你收集整理的高德地图API实现天气查询的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MAX40026 280ps高速比较器
- 下一篇： 一加手机换鸿蒙os,一加手机支持氢OS和