天地图

<template>
  <div class="hello">

    <el-form label-position="top" label-width="80px" :model="localInfo" style="margin: 20px">
      <h3>定位成功</h3>
      <el-form-item label="纬度">
        <el-input v-model="localInfo.latitude" disabled />
      </el-form-item>
      <el-form-item label="经度">
        <el-input v-model="localInfo.longitude" disabled />
      </el-form-item>
      <el-form-item label="时间">
        <el-input v-model="localInfo.Localtime" disabled />
      </el-form-item>
      <el-form-item label="位置">
        <el-input v-model="localInfo.location" disabled />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">定位打卡</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'LocationInMB',
  data() {
    return {
      options: {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      },
      localInfo: {
        latitude: '',
        longitude: '',
        accuracy: '',
        Localtime: '',
        location: ''
      }
    }
  },
  mounted() {
    this.getLocal()
  },
  methods: {
    success(pos) {
      console.log('Your current position is:')
      console.log('Latitude : ' + pos.coords.latitude)
      console.log('Longitude: ' + pos.coords.longitude)
      console.log('More or less ' + pos.coords.accuracy + ' meters.')
      this.localInfo.latitude = pos.coords.latitude
      this.localInfo.longitude = pos.coords.longitude
      this.localInfo.accuracy = pos.coords.accuracy
      this.localInfo.Localtime = new Date().toLocaleDateString()
      this.getDetailLocation(pos.coords.longitude, pos.coords.latitude)
    },
    error(err) {
      console.warn('ERROR(' + err.code + '): ' + err.message)
    },
    getLocal() {
      navigator.geolocation.getCurrentPosition(this.success, this.error, this.options)
    },
    // 通过经纬度获取详细地址
    getDetailLocation(ln, la) {
      axios.get('https://api.tianditu.gov.cn/geocoder', {
        params: {
          tk: 'xxx',
          type: 'geocode',
          // postStr: "{'lon': " + ln.lng + ",'lat':" + la.lat + ",'ver':1}"
          postStr: "{'lon': " + '108.3669' + ",'lat':" + '22.8167' + ",'ver':1}"
        }
      }).then((data) => {
        const addressdata = data.data
        const detaillocation = addressdata.result.formatted_address
        this.localInfo.location = detaillocation
        console.log(detaillocation)
        // 截取地址信息显示
        // _this.locatInfo.location = addressdata.result.formatted_address
        // // 获取定位时间
        // _this.locatInfo.locatTime = (new Date()).toLocaleDateString()
        // _this.locatInfo.lng = lnglat_lng.lng
        // _this.locatInfo.lat = lnglat_lat.lat
        console.log((new Date()).toLocaleDateString())
        console.log((ln.lng))
        console.log((la.lat))
      }).catch((error) => {
        console.log(error)
      })
    }

  }
}
</script>

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页