Html5獲取高德地圖定位天氣的方法
發(fā)布時間:2019-12-26 16:40:20 作者:葉為花而生
我要評論

這篇文章主要介紹了Html5獲取高德地圖定位天氣的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
注:使用的是的模塊注入方式,適用各種前端單頁面應用及H5
創(chuàng)建一個AMap.js文件
// AMap.js // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地圖的key export default function MapLoader () { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap) } else { var script = document.createElement('script') script.type = 'text/javascript' script.async = true //這里引入的是全部模塊,或者按需要模塊引入,加參數(shù)plugin=“模塊名” script.src = 'http://webapi.amap.com/maps?v=1.4.11&callback=initAMap&key=6747cb97****************7e774b4b62' //你的高德應用AK (申請參考官方文檔) script.onerror = reject document.head.appendChild(script)'' } window.initAMap = () => { resolve(window.AMap) } }) }
使用
vue 示例
import MapLoader from '@/common/SDK/AMap.js' MapLoader().then(AMap => { //加載定位插件 AMap.plugin(['AMap.Geolocation', 'AMap.Weather'], function() { var geolocation = new AMap.Geolocation({ // 是否使用高精度定位,默認:true enableHighAccuracy: true, // 設置定位超時時間,默認:無窮大 timeout: 10000, // 定位按鈕的??课恢玫钠屏?,默認:Pixel(10, 20) buttonOffset: new AMap.Pixel(10, 20), // 定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見,默認:false zoomToAccuracy: true, // 定位按鈕的排放位置, RB表示右下 buttonPosition: 'RB' }) geolocation.getCurrentPosition() AMap.event.addListener(geolocation, 'complete', onComplete) AMap.event.addListener(geolocation, 'error', onError) var weather = new AMap.Weather(); function onComplete(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); let obj = { adcode: "330100", //區(qū)域編碼 city: "杭州市", //城市 humidity: "92", //空氣濕度(百分比) info: "OK", //狀態(tài) province: "浙江", //省份 reportTime: "2019-12-24 19:55:48", temperature: 10, //實時氣溫,單位:攝氏度 weather: "陰", //天氣預報 windDirection: "東", // 風向,風向編碼對應描述 windPower: "≤3", //風力,風力編碼對應風力級別,單位:級 } let weatherObj = { 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) }); } function onError(data) { // 定位出錯 if (data.info == 'NOT_SUPPORTED') { uni.showModal({ title: '提示', content: '當前瀏覽器不支持定位功能' || '定位失敗' }) } else if (data.info == 'FAILED') { uni.showModal({ title: '提示', content: data.message || '定位失敗' }) } } }) }, e => { console.log('地圖加載失敗', e) }) }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
- 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶位置的功能,借助這個特性能夠開發(fā)基于位置信息的應用。今天這篇文章向大家介紹一下 HTML5 地理位置定位2017-07-12
- 這篇文章主要為大家詳細介紹了HTML5地理定位與第三方工具百度地圖的應用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-17
HTML5的Geolocation地理位置定位API使用教程
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶位置的功能,借助這個特性能夠開發(fā)基于位置信息的應用,今天這篇文章就向大家介紹一下HTML5的Geolocation地理2016-05-12- 這篇文章主要介紹了HTML5實現(xiàn)獲取地理位置信息并定位功能,本文講解了原生HTML5、百度地圖、谷歌地圖等三種獲取理位置信息并定位的方法,需要的朋友可以參考下2015-04-25
- 這篇文章主要為大家介紹了HTML5地理定位的方法,實例講述了html5獲取坐標完整實現(xiàn)過程,并對比不同瀏覽器運行效果給出參考結(jié)果,需要的朋友可以參考下2014-10-15
- 用html5的地理定位功能通過手機定位獲取當前位置并在地圖上居中顯示出來,下面是百度地圖API的使用過程,有需要的朋友可以參考下2014-08-22
- 這篇文章主要介紹了html5定位并在百度地圖上顯示的示例,需要的朋友可以參考下2014-04-27
利用HTML5中Geolocation獲取地理位置調(diào)用Google Map API在Google Map上
本小菜剛開始學習HTML5,現(xiàn)在對其中的Geolocation頗感興趣,結(jié)合Google Map的API實現(xiàn)基本的地圖定位功能主要是由以下幾個步驟:獲取當前地理位置、調(diào)用Google Map API獲取2013-01-23html5指南-4.使用Geolocation實現(xiàn)定位功能
今天我們要學習的是使用Geolocation實現(xiàn)定位功能。我們可以通過navigator.geolocation獲取Geolocation對象,感興趣的朋友可以了解下2013-01-07html5中地理位置定位api接口開發(fā)應用小結(jié)
HTML 5提供了地理位置等一系列API可以給用戶使用,方便用戶制作LBS的地理應用,首先在支持HTML 5的瀏覽器中,當開啟API時,會詢問是否用戶同意使用api,否則不會開啟的,保2013-01-04