vue 高德地图 天气预报 自动获取用户ip进行定位

<template>
  <div>
    <Card :style="{height : panelHeight + 'px'}">
      <div class="weather-contain">
        <img :src="weatherIcon" style="margin-left:10px;height:55px;width:55px;" />
        <div class="weather-right-panel">
          <div class="weather-simple">
            <div class="weather-temperature" @click="linkToOther()">{{weatherInfo.temperature}}</div>
            <div style="padding-top:3px;line-height:1.3;">
              <div>℃</div>
              <div>{{weatherInfo.weather}}</div>
            </div>
            <div class="weather-quality">{{weatherInfo.city}}</div>
          </div>
          <!-- <div class="weather-desc">{{weatherInfo.nightTemp}}℃ ~ {{weatherInfo.dayTemp}}℃ {{weatherInfo.weather}} {{weatherInfo.windDirection}}风{{weatherInfo.windPower}}级 空气湿度{{weatherInfo.humidity}}</div> -->
          <div class="weather-desc">{{weatherInfo.nightTemp}}℃ ~ {{weatherInfo.dayTemp}}℃ {{weatherInfo.windDirection}}风{{weatherInfo.windPower}}级</div>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
import AMap from 'AMap'
export default {
  data() {
    return {
      sun: require('@/assets/images/common/weather-sun.png'),
      cloud: require('@/assets/images/common/weather-cloud.png'), // 多云
      cloudy: require('@/assets/images/common/weather-cloudy.png'), // 阴
      dust: require('@/assets/images/common/weather-dust.png'), // 沙尘
      haze: require('@/assets/images/common/weather-haze.png'), // 雾霾
      hail: require('@/assets/images/common/weather-hail.png'), // 冰雹
      rain: require('@/assets/images/common/weather-rain.png'), // 雨
      rainsnow: require('@/assets/images/common/weather-rainsnow.png'), // 雨夹雪
      ray: require('@/assets/images/common/weather-ray.png'), // 雷雨
      snow: require('@/assets/images/common/weather-snow.png'), // 雪
      weatherIcon: null,
      weatherInfo: {
        temperature: '', // 温度
        weather: '', // 天气
        city: '', // 城市
        nightTemp: '', // 夜间温度
        dayTemp: '', // 日间温度
        windDirection: '', // 风向
        windPower: '', // 风力
        humidity: '' // 湿度
      }
    }
  },
  props: {
    panelHeight: {
      type: Number,
      default: 350
    }
  },
  mounted() {
    this.initWeather()
  },
  methods: {
    // 高德地图的写法，首先获取定位，因为天气是基于用户定位的
    getCity() {
      return new Promise(function(resolve, reject) {
        AMap.plugin('AMap.CitySearch', function() {
          var citysearch = new AMap.CitySearch()
          // 自动获取用户IP，返回当前城市
          citysearch.getLocalCity(function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.city && result.bounds) {
                resolve(result.city)
              }
            } else {
              this.$Message.error('定位当前城市失败')
              reject(result.info)
            }
          })
        })
      })
    },
    async initWeather() {
      // 获取天气
      let $self = this
      let countyInfo = await $self.getCity() // 获取定位的城市
      AMap.plugin('AMap.Weather', function() {
        var weather = new AMap.Weather()
        // 查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
        weather.getLive(countyInfo, function(err, data) {
          if (!err) {
            $self.weatherInfo.city = data.city
            $self.weatherInfo.humidity = data.humidity
            $self.weatherInfo.temperature = data.temperature
            $self.weatherInfo.weather = data.weather
            $self.weatherInfo.windDirection = data.windDirection
            $self.weatherInfo.windPower = data.windPower
            $self.getWeatherIcon(data.weather)
          } else {
            this.$Message.error('未查询到相关天气信息')
          }
        })
        weather.getForecast(countyInfo, function(err, data) {
          if (!err) {
            $self.weatherInfo.nightTemp = data.forecasts[0].nightTemp
            $self.weatherInfo.dayTemp = data.forecasts[0].dayTemp
          }
        })
      })
    },
    getWeatherIcon(item) {
      if(item === '晴') {
        this.weatherIcon = this.sun
      }else if(item === '多云') {
        this.weatherIcon = this.cloud
      }else if(item === '阴') {
        this.weatherIcon = this.cloudy
      }else if(!(item.indexOf('沙') === -1) || !(item.indexOf('尘') === -1)) {
        this.weatherIcon = this.dust
      }else if(!(item.indexOf('雾') === -1) || !(item.indexOf('霾') === -1)) {
        this.weatherIcon = this.haze
      }else if(!(item.indexOf('雹') === -1)) {
        this.weatherIcon = this.hail
      }else if(!(item.indexOf('雨') === -1) && item.indexOf('雪') === -1) {
        this.weatherIcon = this.rain
      }else if(!(item.indexOf('雪') === -1) && item.indexOf('雨') === -1) {
        this.weatherIcon = this.snow
      }else if(!(item.indexOf('雨') === -1) && !(item.indexOf('雪') === -1)) {
        this.weatherIcon = this.rainsnow
      }else { // 其他情况
        this.weatherIcon = this.cloudy
      }
      if(!(item.indexOf('雷') === -1)) {
        this.weatherIcon = this.ray
      }
    },
    linkToOther() {
      let link = document.createElement('a')
      link.href = 'http://www.weather.com.cn/weather1d/101120101.shtml'
      link.setAttribute('target', '_blank')
      document.body.appendChild(link)
      link.style.display = 'none'
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>
<style lang="less" scoped>
.weather-contain {
  display: flex;
  vertical-align: middle;
  .weather-right-panel {
    width: 70%;
    margin-left: 30px;
  }
  .weather-simple {
    display: inline-flex;
    justify-content: middle;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    .weather-temperature {
      cursor: pointer;
      margin-right: 8px;
      font-size: 44px;
      font-family: Arial-BoldMT;
      font-weight: bold;
      color: #00A0E9;
      &:hover {
        text-decoration: underline;
      }
    }
    .weather-quality {
      margin-left: 8px;
      margin-top: 25px;
      padding: 2px;
      background: #00A0E9;
      color: #fff;
      border-radius: 2px;
    }
  }
  .weather-desc {
    margin-top: 10px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    // max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.todoli {
  position: relative;
  margin-left: 70px;
  list-style: none;
  height: 90px;
  padding-top: 20px;
  padding-bottom: 20px;
  .todo-text {
    float: left;
    width: 70%;
    .todo-title {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(68, 68, 68, 1);
      margin-bottom: 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .todo-subtitle {
      font-size: 12px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.todoli + .todoli {
  border-top: 1px solid rgba(225, 226, 226, 1);
}
.will1:before {
  content: '';
  background: url('~assets/images/common/will1.png') no-repeat center;
  height: 55px;
  width: 55px;
  position: absolute;
  left: -70px;
  top: 13px;
  background-position: 0px 0px;
}
.will2:before {
  content: '';
  background: url('~assets/images/common/will2.png') no-repeat center;
  height: 55px;
  width: 55px;
  position: absolute;
  left: -70px;
  top: 13px;
  background-position: 0px 0px;
}
.will3:before {
  content: '';
  background: url('~assets/images/common/will3.png') no-repeat center;
  height: 55px;
  width: 55px;
  position: absolute;
  left: -70px;
  top: 13px;
  background-position: 0px 0px;
}
.will4:before {
  content: '';
  background: url('~assets/images/common/will4.png') no-repeat center;
  height: 55px;
  width: 55px;
  position: absolute;
  left: -70px;
  top: 13px;
  background-position: 0px 0px;
}
</style>

需要注意的是 这里用到了amap，你们需要找相应的js  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=toekn钥匙"></script>