idea集成腾讯地图，添加标注并获得经纬度

我做的是点击按钮，弹出地图，使用鼠标在地图上添加一个标注，点击确定按钮，获取标注点的经纬度
1、进入腾讯的官网，申领自己的Key https://lbs.qq.com
2、建立一个js文件

export function TMap() {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(window.qq)
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://map.qq.com/api/js?v=2.exp&callback=init&key=自己的Key'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

3、在vue里面添加一个按钮

        <el-form-item label="点击获取经纬度">
          <el-button :plain="true" type="primary" @click="gain">获取经纬度</el-button>
          <el-dialog :visible.sync="plat">
            <el-form
              id="atlas"
              status-icon
              label-position="left"
              label-width="100px"
              style="width: 400px; margin-left:50px;"/>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="platMethod ">确定</el-button>
            </div>
          </el-dialog>
        </el-form-item>

4、在vue里

gain() {
      this.plat = true
      this.mapTX()
    },
    mapTX() {
      TMap().then(qq => {
        var that = this
        var map = new qq.maps.Map(document.getElementById('atlas'), {
          // 这里经纬度代理表进入地图显示的中心区域
          center: new qq.maps.LatLng(31.858022, 117.285233),
          zoom: 13
        })
        // 绑定单击事件添加参数
        qq.maps.event.addListener(map, 'click', function(event) {
          var marker = new qq.maps.Marker({
            position: event.latLng,
            map: map
          })
          // 创建marker标注
          that.markersArray.push(marker)
          if (that.markersArray.length > 1) {
            for (let i = 0; i < that.markersArray.length - 1; i++) {
              that.markersArray[i].setMap(null)// 清除标记
            }
          }
          that.deviceDetail.longitude = event.latLng.lat
          that.deviceDetail.latitude = event.latLng.lng
        })
      })
    },

最终效果图

点击确定，就可以拿到经纬度了
java代码进行添加就和平时一样即可