【腾讯地图】录入经纬度功能 - 支持地图选点

当前文章 - 地图功能与 https://blog.csdn.net/m0_53562074/article/details/143677335 功能类似

效果展示

代码

引入地图服务地址

public/index.html

<!-- 互联网地图 -->
<script src="https://map.qq.com/api/gljs?v=2.exp&key=自己申请的key"></script>

<!-- 如果有用到编辑器 new TMap.tools.GeometryEditor() ，地图服务地址上查询参数要加 libraries=tools -->
<!-- https://map.qq.com/api/gljs?libraries=tools&v=2.exp&key=自己申请的key -->

弹框中输入框 - 支持手动输入经纬度/地图选点按钮

已删除无关代码，只展示地图选点相关代码

<template>
  <el-dialog
    v-if="dialogVisible"
    title="弹框展示选点"
    :visible.sync="dialogVisible"
    :show-close="true"
    width="700px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    append-to-body
  >
    <!-- ... -->
    <div class="position">
      <el-input v-model="formData.position" placeholder="请输入勤务地点" size="mini" />
      <i class="iconfont ico-dituxuanze" @click="setPosition" />
    </div>

    <SetPointMap ref="SetPointMapRef" @updatePoint="updatePointHandler" />
  </el-dialog>
</template>

<script>
// ...
import SetPointMap from './SetPointMap'

export default {
  name: 'ResultEntry',
  components: { SetPointMap },

  data() {
    return {
      // /...
      formData: {
        position: ''
      },
      dialogVisible: false
    }
  },

  methods: {
    // ...
    showDetail() {
      this.dialogVisible = true
    },
    setPosition() {
      const { position } = this.formData

      const arr = position.split(/,|，/)

      const pointer = {
        jd: arr[0],
        wd: arr[1]
      }
      this.$refs.SetPointMapRef.open(pointer)
    },
    updatePointHandler({ jd, wd }) {
      this.formData.position = `${jd},${wd}`
    },
    handleClose() {
      // ...
      // 关闭弹窗
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
// ...

.position {
  display: flex;
  .el-input {
    flex: 1;
    margin-right: 10px;
  }
  .iconfont {
    cursor: pointer;
  }
}
</style>

地图选点弹框组件

SetPointMap.vue

<!-- 地图选点 -->
<template>
  <el-drawer
    v-if="drawerVisible"
    title="地图标注"
    size="65%"
    append-to-body
    :before-close="handleClose"
    :visible.sync="drawerVisible"
  >
    <div :id="idName" class="TMap" />
  </el-drawer>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'SetPointMap',
  data() {
    return {
      drawerVisible: false,

      idName: 'setPointMap',

      map: null,
      multiMarker: null, // 点位图标

      point: {},
      clickPoint: {}
    }
  },

  computed: {
    ...mapGetters(['sysConfigData'])
  },

  watch: {
    clickPoint: {
      handler(val) {
        if (val.jd) {
          this.$confirm(
            `确定标注以下经纬度吗？<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经度 ${val.jd}<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;纬度 ${val.wd}`,
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              dangerouslyUseHTMLString: true
            }
          )
            .then((_) => {
              this.drawerVisible = false
              this.$emit('updatePoint', val)
            })
            .catch((_) => {
              this.$message.info('取消经纬度标注')
              this.clickPoint = {}
            })
        }
      }
    }
  },

  mounted() {
    this.initMap()
  },
  methods: {
    open(pointer) {
      this.drawerVisible = true
      this.point = pointer // 保存初始经纬度
    },
    initMap() {
      var location = (this.sysConfigData.map_location || '121.427648,28.661939').split(',')

      this.map = new TMap.Map(this.idName, {
        zoom: this.sysConfigData.map_level || 14,
        center: new TMap.LatLng(Number(location[1]), Number(location[0]))
      })

      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION) // 移除腾讯地图旋转控件
      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM) // 移除腾讯地图缩放控件

      if (this.point.jd && this.point.wd) {
        // 将初始经纬度在地图上进行标点
        this.setPoint({ ...this.point }, true)
      }

      this.map.on('click', (e) => {
        // 点击地图获取经纬度
        this.removePoint() // 移除已有标点

        this.clickPoint = {
          jd: e.latLng.lat,
          wd: e.latLng.lng
        }
        // 点击位置进行标点
        this.setPoint({ ...this.clickPoint })
      })
    },

    setPoint({ jd, wd }, isSetCenter = false) {
      isSetCenter && this.map.setCenter(new TMap.LatLng(Number(jd), Number(wd)))

      this.MultiMarker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: this.map,
        styles: {
          marker: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 }
          })
        },
        geometries: [
          {
            id: 'demo',
            styleId: 'marker',
            position: new TMap.LatLng(jd * 1, wd * 1),
            properties: {
              title: 'marker'
            }
          }
        ]
      })
    },

    removePoint() {
      this.MultiMarker?.setMap(null)
    },

    handleClose(done) {
      this.$confirm('还有未保存的工作,确定关闭吗？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    }
  }
}
</script>

<style lang='scss' scoped>
.TMap {
  width: 100%;
  height: 100%;
}

::v-deep .el-drawer {
  .el-drawer__body {
    padding: 0;
  }
}
</style>