获取定位并查询天气
<template>
<div>
<vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2" v-if="newsList.length">
<ul class="item">
<li v-for="(item,i) in newsList" :key="i" v-html="item.title"></li>
</ul>
</vue-seamless-scroll>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import axios from 'axios';
import AMap from 'AMap' // 引入高德地图
import location from '../../utils/positionLocation'
export default {
components:{vueSeamlessScroll},
data () {
return {
newsList: []
}
},
computed: {
optionLeft () {
return {
hoverStop: false,
step: 0.4, // 数值越大速度滚动越快
direction: 2,// 0向下 1向上 2向左 3向右
limitMoveNum: this.newsList.length,// 开始无缝滚动的数据量 this.dataList.length
location: '',
lat: 0,
lng: 0,
}
}
},
methods: {
async getWeather (cityArea) {
let myDate = new Date();
let tMonth = myDate.getMonth()+1;
let result = await axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+cityArea);
let str = result.forecast[0].fengli;
let str2 = result.forecast[1].fengli;
//今日天气
var r = /\[(.+?)\]/g;
var m = r.exec(str);
let strItem = `${result.city}，今天，${tMonth}月${result.forecast[0].date}，天气 ：${result.forecast[0].fengxiang}${m[1].substr(6)}，${result.forecast[0].type}，${result.forecast[0].low.substr(3)} ~ ${result.forecast[0].high.substr(3)}，当前${result.wendu}℃，${result.ganmao} `
//明日天气
var r2 = /\[(.+?)\]/g;
var m2 = r2.exec(str2);
let strItem2 = `明天，${tMonth}月${result.forecast[1].date}，${result.forecast[1].fengxiang}${m2[1].substr(6)}，${result.forecast[1].type}，${result.forecast[1].low.substr(3)} ~ ${result.forecast[1].high.substr(3)} 。`
let arr = [{title:strItem},{title:strItem2}];
this.newsList = arr;
},
async getCityAreaFun(){
let _that = this;
let geolocation = await location.initMap('map-container') // 定位
AMap.event.addListener(geolocation, 'complete', result => {
let cityArea = result.addressComponent.district;
_that.getWeather(cityArea);
});
}
},
mounted() {
this.$nextTick(callback=>{
this.getCityAreaFun();
})
}
}
</script>
<style lang="less" scoped>
.seamless-warp2 {
overflow: hidden;
height: 25px;
width: 150px;
font-size: 14px;
line-height: 30px;
ul {
width: 1500px;
li {
float: left;
margin-right: 10px;
list-style: none;
color:yellow
}
}
}
</style>
positionLocation.js 文件
/**
* 高德地图定位
*/
const location = {
initMap(id) {
let mapObj = new AMap.Map(id, {})
let geolocation;
mapObj.plugin(['AMap.Geolocation'], function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, // 显示定位按钮，默认：true
buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
})
mapObj.addControl(geolocation)
geolocation.getCurrentPosition()
})
return geolocation;
}
}
export default location
