Html5獲取高德地圖定位天氣的方法
發(fā)布時(shí)間:2019-12-26 16:40:20 作者:葉為花而生
我要評(píng)論
這篇文章主要介紹了Html5獲取高德地圖定位天氣的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(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):無(wú)窮大
timeout: 10000,
// 定位按鈕的停靠位置的偏移量,默認(rèn):Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見(jiàn),默認(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 的重要特性之一,提供了確定用戶(hù)位置的功能,借助這個(gè)特性能夠開(kāi)發(fā)基于位置信息的應(yīng)用。今天這篇文章向大家介紹一下 HTML5 地理位置定位2017-07-12- 這篇文章主要為大家詳細(xì)介紹了HTML5地理定位與第三方工具百度地圖的應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-17
HTML5的Geolocation地理位置定位API使用教程
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶(hù)位置的功能,借助這個(gè)特性能夠開(kāi)發(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)過(guò)程,并對(duì)比不同瀏覽器運(yùn)行效果給出參考結(jié)果,需要的朋友可以參考下2014-10-15
- 用html5的地理定位功能通過(guò)手機(jī)定位獲取當(dāng)前位置并在地圖上居中顯示出來(lái),下面是百度地圖API的使用過(guò)程,有需要的朋友可以參考下2014-08-22
- 這篇文章主要介紹了html5定位并在百度地圖上顯示的示例,需要的朋友可以參考下2014-04-27
利用HTML5中Geolocation獲取地理位置調(diào)用Google Map API在Google Map上
本小菜剛開(kāi)始學(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)定位功能。我們可以通過(guò)navigator.geolocation獲取Geolocation對(duì)象,感興趣的朋友可以了解下2013-01-07html5中地理位置定位api接口開(kāi)發(fā)應(yīng)用小結(jié)
HTML 5提供了地理位置等一系列API可以給用戶(hù)使用,方便用戶(hù)制作LBS的地理應(yīng)用,首先在支持HTML 5的瀏覽器中,當(dāng)開(kāi)啟API時(shí),會(huì)詢(xún)問(wèn)是否用戶(hù)同意使用api,否則不會(huì)開(kāi)啟的,保2013-01-04


