Vue3引入腾讯地图,点击坐标后实时获取经纬度

本文将介绍如何在Vue 引入腾讯地图组件,引入后可以直接在页面中渲染腾讯地图,实现 经纬度 与 地图锚点位置的双向绑定,如:

  • 1,输入经纬度后,地图自动定位到指定位置;
  • 2,鼠标在地图点击后,自动获取到地址的经纬度;

最终实现效果如下:

实现细节

1,引入腾讯地图,需要借助腾讯地图提供的 SDK,先需要在腾讯地图开发平台添加应用,申请对应的调用 key凭证,开发平台地址:https://lbs.qq.com/dev/console/application/mine

2,找到Vue/Vue3 项目中的 index.html , 通过 script 标签 引入 腾讯地图 sdk

html 复制代码
  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你的Key"></script>

3,在组件中实现核心代码,渲染地图组件,

  • 监听地图点击事件,实时获取点击地点对应的经纬度;
  • 监听文本框输入经纬度值,在地图中渲染目标地点;
vue 复制代码
<template>
  <div style="display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 300px;">
    <div>
      <a-form>
        <div style="display: flex;justify-content: flex-start;">
          <a-form-item label="纬度">
            <a-input v-model:value="loc.lat"></a-input>
          </a-form-item>
          <a-form-item label="经度">
            <a-input v-model:value="loc.lng"></a-input>
          </a-form-item>
        </div>
      </a-form>
    </div>
    <div class="common-map-loc">
      <div id="container">
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
let loc = ref({
  lat: 39.984104,
  lng: 116.307503,
  address: ''
})
watch(() => loc.value.lat,
  (val, o) => {
    console.log('val is ', val)
    flushLatLon()
  }
)

watch(() => loc.value.lng,
  (val, o) => {
    console.log('val is ', val)
    flushLatLon()
  }
)

// 刷新地图
function flushLatLon() {
  var element = document.getElementById("container");
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }

  var center = new TMap.LatLng(loc.value.lat, loc.value.lng);//设置中心点坐标
  //初始化重新定位
  var map = new TMap.Map("container", {
    center: center
  });
}
// 组件挂载后,渲染对应组件
onMounted(() => {
  var center = new TMap.LatLng(loc.value.lat, loc.value.lng);//设置中心点坐标
  //初始化地图
  var map = new TMap.Map("container", {
    center: center
  });

  //绑定点击事件
  map.on("click", function (evt) {
    console.log('event is ', evt)
    var lat = evt.latLng.getLat().toFixed(6);
    var lng = evt.latLng.getLng().toFixed(6);
    loc.value.lat = lat
    loc.value.lng = lng
  })
})

</script>

<style scoped lang="less">
.common-map-loc {
  position: relative;

  #ccontainer {
    width: 100%;
    height: 100%;
  }

  #info {
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 14px;
    background: #FFF;
    width: 40%;
    padding: 10px;
    border-radius: 3px;
  }
}

.search-div {
  display: flex;
  justify-content: center;
}
</style>
相关推荐
niuhuahua21 小时前
大模型流式聊天,实时对话,快捷问题选项
vue.js
JIngJaneIL21 小时前
汽车租赁|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁系统
kymjs张涛1 天前
零一开源|前沿技术周刊 #15
前端·javascript·面试
Artea1 天前
聊聊 Vue3 的泛型
vue.js
BYSJMG1 天前
计算机毕业设计选题:基于Spark+Hadoop的健康饮食营养数据分析系统【源码+文档+调试】
大数据·vue.js·hadoop·分布式·spark·django·课程设计
reacx1 天前
# 第三章:状态管理架构设计 - 从 Zustand 到 React Query 的完整实践
前端
古夕1 天前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部1 天前
前端-业务-架构
前端·javascript·代码规范
Bug生产工厂1 天前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
小喷友1 天前
阶段三:进阶(Rust 高级特性)
前端·rust