腾讯地图+vue实现后台设置某外卖店铺的位置坐标

1、开发需求

在vue后台管理系统实现定位选点（位置），即后台设置某个外卖店铺的位置坐标。

2、效果展示

3、技术选择

使用腾讯地图的JavaScript API GL在vue框架中实现，一个vue页面即可搞定。

官方文档地址：https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview

4、代码

<template>
  <div id="container"></div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.loadTMapScript().then(() => {
      // 脚本加载完成后可以安全使用 TMap
      this.initMap()
    }).catch(err => {
      console.error('加载 TMap 脚本失败:', err)
    })
  },
  methods: {
    loadTMapScript() {
      return new Promise((resolve, reject) => {
        if (window.TMap) {
          // 如果 TMap 已经加载，直接 resolve
          resolve()
        } else {
          const script = document.createElement('script')
          script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=xxx-xxx-xxxx' // key请替换为你的腾讯地图key
          script.onload = () => {
            const TMapCheck = window.TMap // 确认 TMap 是否已存在
            if (TMapCheck) {
              resolve() // 脚本加载成功
            } else {
              reject(new Error('TMap 未定义'))
            }
          }
          script.onerror = () => {
            reject(new Error('脚本加载失败'))
          }
          document.head.appendChild(script)
        }
      })
    },
    initMap() {
      // 检查 TMap 是否已加载
      if (window.TMap) {
        this.map = new window.TMap.Map('container', {
          center: new window.TMap.LatLng(39.916527, 116.397128), // 设置中心坐标
          zoom: 18,
        })
        const { map } = this
        // 初始化marker
        const marker = new window.TMap.MultiMarker({
          id: 'marker-layer', // 图层id
          map,
          styles: { // 点标注的相关样式
            marker: new window.TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: { x: 16, y: 32 }
            })
          },
          geometries: [{ // 点标注数据数组
            id: 'demo',
            styleId: 'marker',
            position: new window.TMap.LatLng(39.916527, 116.397128),
            properties: {
              title: 'marker'
            }
          }]
        })
        // 监听点击地图，切换位置
        map.on('click', event => {
          const position = event.latLng // 获取点击位置的经纬度
          console.log(`地图点击位置: (${position.lat}, ${position.lng})`)
          // 更新地图
          marker.setGeometries([{ // 点标注数据数组
            id: 'demo',
            styleId: 'marker',
            position: new window.TMap.LatLng(position.lat, position.lng),
            properties: {
              title: 'marker'
            }
          }])
        })
      } else {
        console.error('TMap 未定义，无法初始化地图')
      }
    },
  }
}
</script>

<style scoped>
#container{
  width:50%;
  height:800px;
  position: relative;
  top: 0px; /* 设置上边距为 50% */
  left: 50%; /* 设置左边距为 50% */
  transform: translate(-50%, 0);
}
</style>

如果对你有帮助，多谢一键三连！！！