腾讯地图JavaScript API GL 版标记及输入经纬度反向定位（vue.js实现）

<template>
<div>
	<el-form-item label="经度"  prop="longitude" >
        <el-input  v-model="longitude"  @input="creatMapPoint" />
	</el-form-item>
	<el-form-item label="纬度" prop="latitude">
       <el-input  v-model="latitude"  @input="creatMapPoint" />
    </el-form-item>
     <div id="tenXMap" class="tenXMap"/>
</div>
</template>
<script>
 data() {
	 return {
	  longitude: 116.397666,
      latitude: 39.907947
      markerLayer: {},
      map: {},
	 }
 }
mounted() {
  		// 清空标记
    this.markerLayer = new window.TMap.MultiMarker({})
      // 腾讯地图初始化
    this.initMap()
  },
 methods: {
    initMap() {
      const that = this
      const center = new window.TMap.LatLng(Number(this.latitude), Number(this.longitude))
      that.map = new window.TMap.Map(document.getElementById('tenXMap'), {
        center: center,
        zoom: 11
      })
      const latLng = {
        height: 0,
        lat: Number(this.latitude),
        lng: Number(this.longitude)
      }
      this.addImgMarker(latLng)
      that.map.on('click', (e) => {
        that.markerLayer.setGeometries([])
        const position = e.latLng
        that.addImgMarker(position)
        that.latitude = e.latLng.getLat().toFixed(6)
        that.longitude = e.latLng.getLng().toFixed(6)
      })
    }，
      // 地图标记
    addImgMarker(data) {
      this.markerLayer = new window.TMap.MultiMarker({
        map: this.map,
        styles: {
          myStyle: new window.TMap.MarkerStyle({
            width: 25, // 点标记样式宽度（像素）
            height: 30, // 点标记样式高度（像素）
            src: this.imgurl, // 自定义的标记图标
            anchor: { x: 16, y: 32 }
          })
        },
        geometries: [
          {
            id: '0',
            styleId: 'myStyle',
            position: new window.TMap.LatLng(data.lat, data.lng)
          }
        ]
      })
    },
    creatMapPoint() { // 根据输入框坐标定位
      if (this.markerLayer) {
        this.markerLayer.setMap(null)
      }
      const latLng = {
        height: 0,
        lat: Number(this.latitude),
        lng: Number(this.longitude)
      }
      this.markerLayer.setGeometries([])
      this.map.easeTo({ center: new window.TMap.LatLng(Number(this.showForm.latitude), Number(this.showForm.longitude)), zoom: 11, rotation: 0 }, { duration: 1000 }) // 平滑缩放,旋转到指定级别
      this.addImgMarker(latLng)
    },
 }
 </script>