vue 腾讯地图获取经纬度、地址

1、效果（点击地图获取，出现地图弹框，确定后input自动填写经纬度）

2、组件

<template>
  <div>
    <el-dialog
      width="30%"
      :before-close="cancel"
      :closable="false"
      :mask-closable="false"
      :visible="visible"
      :close-on-click-modal="false"
    >
      <span>
        <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置" clearable style="margin-bottom:20px;">
          <el-button slot="append" icon="el-icon-search" @click="getAddressKeyword"></el-button>
         </el-input>
        <div id="container" style="width:100%;height:400px;"></div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import maps from 'qqmap'
export default {
  components: {},
  data () {
    return {
      map: null,
      getAddress: null,
      getAddCode: null,
      addressKeyword: '',
      shopInfo: {
        lng: '',
        lat: '',
        addr: ''
      }
    }
  },
  props: {
    visible: Boolean
  },
  created () {},

  watch: {
    // showModal: function(newValue) {
    //   if (newValue) {
    //     this.init()
    //   }
    // }
    // value: function (currentValue) {
    //   this.showMapComponent = currentValue
    //   if (currentValue) {
    //     this.keyword = ''
    //   }
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    // 初始化地图
    init() {
      var that = this
      maps.init('XIRBZ-TWKWD-AAX4Q-HEKFK-JGPIO-YNBTJ', () => {
        var myLatlng = new qq.maps.LatLng(27.979716, 109.59023)
        var myOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeId: qq.maps.MapTypeId.ROADMAP
        }
        that.map = new qq.maps.Map(
          document.getElementById('container'),
          myOptions
        )
        // 获取点击后的地址
        qq.maps.event.addListener(that.map, 'click', function(event) {
          // 获取点击后的地图坐标

          that.shopInfo.lng = event.latLng.getLng()
          that.shopInfo.lat = event.latLng.getLat()
          that.getAddressCode()
        })

        // 调用地址显示地图位置并设置地址
        that.getAddress = new qq.maps.Geocoder({
          complete: function(result) {
            that.map.setCenter(result.detail.location)
            console.log(result.detail.location)
            that.shopInfo.lng = result.detail.location.lng
            that.shopInfo.lat = result.detail.location.lat
            that.$emit('getPlace', that.shopInfo)
            var marker = new qq.maps.Marker({
              map: that.map,
              position: result.detail.location
            })
            console.log(marker)
          }
        })
        // 通过坐标来显示地图地址
        that.getAddCode = new qq.maps.Geocoder({
          complete: function(result) {
            that.addressKeyword = result.detail.address
            that.shopInfo.addr = result.detail.address
            that.$emit('getPlace', that.shopInfo)
            console.log(that.shopInfo)
          }
        })
      })
    },
    // 通过地址获得位置
    getAddressKeyword() {
      // 通过getLocation();方法获取位置信息值
      this.getAddress.getLocation(this.addressKeyword)
    },
    // 通过坐标获得地址
    getAddressCode() {
      var lat = parseFloat(this.shopInfo.lat)
      var lng = parseFloat(this.shopInfo.lng)
      var latLng = new qq.maps.LatLng(lat, lng)
      // 调用获取位置方法
      this.getAddCode.getAddress(latLng)
    },
    /***
     * 确认
     */
    confirm: function () {
      this.$emit('map-confirm', this.shopInfo)
    },
    /***
     * 取消
     */
    cancel: function () {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.serachinput {
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
}
</style>

3、页面引入

import TMap from '../../components/TMap.vue'

components: { TMap }

<div v-if="showMapComponent">
      <TMap
      @cancel="cancelMap"
      @getPlace="getPlace"
      @map-confirm="confirmMap"
      :visible="showMapComponent"
      ></TMap>
</div>

cancelMap () {
      this.showMapComponent = !this.showMapComponent
    },
    getPlace (e) {
      console.log(e, 'val')
      this.longitudeLatitude = e
    },
    confirmMap () {
      const e = this.longitudeLatitude
      const obj = { 经度: e.lng.toFixed(6), 纬度: e.lat.toFixed(6) }
      const arr = []
      for (var k in obj) {
        const str = k + ':' + obj[k]
        arr.push(str)
      }
      this.form.longitudeLatitude = arr.join(',')
      this.form.longitude = e.lng + ''
      this.form.dimension = e.lat + ''
      this.showMapComponent = !this.showMapComponent
    }

注意：
1、需要下载插件 npm i qqmap
2、vue会报qq未定义，解决办法：.eslintrc.js中加入 globals:{ 'qq': true }