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

這篇文章主要介紹了Html5獲取高德地圖定位天氣的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
注:使用的是的模塊注入方式,適用各種前端單頁(yè)面應(yīng)用及H5
創(chuàng)建一個(gè)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' //你的高德應(yīng)用AK (申請(qǐng)參考官方文檔) 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({ // 是否使用高精度定位,默認(rèn):true enableHighAccuracy: true, // 設(shè)置定位超時(shí)時(shí)間,默認(rèn):無窮大 timeout: 10000, // 定位按鈕的停靠位置的偏移量,默認(rèn):Pixel(10, 20) buttonOffset: new AMap.Pixel(10, 20), // 定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見,默認(rèn):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, //實(shí)時(shí)氣溫,單位:攝氏度 weather: "陰", //天氣預(yù)報(bào) windDirection: "東", // 風(fēng)向,風(fēng)向編碼對(duì)應(yīng)描述 windPower: "≤3", //風(fēng)力,風(fēng)力編碼對(duì)應(yīng)風(fēng)力級(jí)別,單位:級(jí) } 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) { // 定位出錯(cuò) if (data.info == 'NOT_SUPPORTED') { uni.showModal({ title: '提示', content: '當(dāng)前瀏覽器不支持定位功能' || '定位失敗' }) } else if (data.info == 'FAILED') { uni.showModal({ title: '提示', content: data.message || '定位失敗' }) } } }) }, e => { console.log('地圖加載失敗', e) }) }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
HTML5地理定位_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶位置的功能,借助這個(gè)特性能夠開發(fā)基于位置信息的應(yīng)用。今天這篇文章向大家介紹一下 HTML5 地理位置定位2017-07-12- 這篇文章主要為大家詳細(xì)介紹了HTML5地理定位與第三方工具百度地圖的應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-17
HTML5的Geolocation地理位置定位API使用教程
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶位置的功能,借助這個(gè)特性能夠開發(fā)基于位置信息的應(yīng)用,今天這篇文章就向大家介紹一下HTML5的Geolocation地理2016-05-12HTML5實(shí)現(xiàn)獲取地理位置信息并定位功能
這篇文章主要介紹了HTML5實(shí)現(xiàn)獲取地理位置信息并定位功能,本文講解了原生HTML5、百度地圖、谷歌地圖等三種獲取理位置信息并定位的方法,需要的朋友可以參考下2015-04-25- 這篇文章主要為大家介紹了HTML5地理定位的方法,實(shí)例講述了html5獲取坐標(biāo)完整實(shí)現(xiàn)過程,并對(duì)比不同瀏覽器運(yùn)行效果給出參考結(jié)果,需要的朋友可以參考下2014-10-15
- 用html5的地理定位功能通過手機(jī)定位獲取當(dāng)前位置并在地圖上居中顯示出來,下面是百度地圖API的使用過程,有需要的朋友可以參考下2014-08-22
- 這篇文章主要介紹了html5定位并在百度地圖上顯示的示例,需要的朋友可以參考下2014-04-27
利用HTML5中Geolocation獲取地理位置調(diào)用Google Map API在Google Map上
本小菜剛開始學(xué)習(xí)HTML5,現(xiàn)在對(duì)其中的Geolocation頗感興趣,結(jié)合Google Map的API實(shí)現(xiàn)基本的地圖定位功能主要是由以下幾個(gè)步驟:獲取當(dāng)前地理位置、調(diào)用Google Map API獲取2013-01-23html5指南-4.使用Geolocation實(shí)現(xiàn)定位功能
今天我們要學(xué)習(xí)的是使用Geolocation實(shí)現(xiàn)定位功能。我們可以通過navigator.geolocation獲取Geolocation對(duì)象,感興趣的朋友可以了解下2013-01-07html5中地理位置定位api接口開發(fā)應(yīng)用小結(jié)
HTML 5提供了地理位置等一系列API可以給用戶使用,方便用戶制作LBS的地理應(yīng)用,首先在支持HTML 5的瀏覽器中,當(dāng)開啟API時(shí),會(huì)詢問是否用戶同意使用api,否則不會(huì)開啟的,保2013-01-04