首先在https://lbs.qq.com/ 这个网页中 先使用微信 注册一个
1.1然后创建应用创建你的key 效果如下 这里面必须填写 ： 0.0.0.0-255.255.25.255
// 命令
npm i -S vue-jsonp
// 在main.js导入并使用
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)
// 当地信息（城市、时间、地点、天气）
local: {
// ip地址所在城市
city: '',
// 所在城市温度
temperature: '',
// 天气类型
type: '',
// 时
hour: '',
// 分
minute: '',
// 月
month: '',
// 日
date: '',
// 星期几
day: ''
// 出勤率echart数据
},
// 经纬度信息
location: {
lat: null,
lng: null
},定义好了 在methods中定义获取城市的方法 getLocalCity，在created()中调用 即可 created() {
// this.getLocalCity()
},
methods: {
// 获取室外温度
getLocalCity() {
var data = {
key: '你的腾讯位置的key'
}
var url = 'https://apis.map.qq.com/ws/location/v1/ip' //这个就是地理位置信息的接口
data.output = 'jsonp'
this.$jsonp(url, data)
.then((res) => {
console.log(res)
this.location = res.result.location
// 根据城市，获取当前天气和时间（在此先预留获取天气方法，完成后取消注释）
// this.getLocalWeather(this.location) // 这里就是调用下面的那个
return res
})
.catch((error) => {
console.log(error)
})
},
}
// 命令
npm install axios
// 为了方便，我在当前vue文件导入axios调用api
//xxx.vue文件
import axios from 'axios'
// 获取当地时间和天气,这里的lng,lat是当前位置的经纬度信息
getLocalWeather(location) {
console.log(location)
axios.get(`https://devapi.qweather.com/v7/weather/now?location=${location.lng},${location.lat}&key=你的和风天气的key`).then(res => {
console.log(res)
this.local.temperature = res.data.now.temp
console.log(this.local.temperature)
})
}
最后附上完整的methods方法:
methods: {
// 获取室外温度
getLocalCity() {
var data = {
key: '腾讯位置的key'
}
var url = 'https://apis.map.qq.com/ws/location/v1/ip' //这个就是地理位置信息的接口
data.output = 'jsonp'
this.$jsonp(url, data)
.then((res) => {
console.log(res)
this.location = res.result.location
// 根据城市，获取当前天气和时间（在此先预留获取天气方法，完成后取消注释）
this.getLocalWeather(this.location) // 这里就是调用下面的那个
return res
})
.catch((error) => {
console.log(error)
})
},
// 获取当地时间和天气
getLocalWeather(location) {
console.log(location)
axios.get(`https://devapi.qweather.com/v7/weather/now?location=${location.lng},${location.lat}&key=和风天气的key`).then(res => {
console.log(res)
this.local.temperature = res.data.now.temp
console.log(this.local.temperature)
})
}
}