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

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

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

最终实现效果如下:
Vue3引入腾讯地图,点击坐标后实时获取经纬度_第1张图片

实现细节

1,引入腾讯地图,需要借助腾讯地图提供的 SDK,先需要在腾讯地图开发平台添加应用,申请对应的调用 key凭证,开发平台地址:https://lbs.qq.com/dev/console/application/mine
Vue3引入腾讯地图,点击坐标后实时获取经纬度_第2张图片

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

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

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

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

  • 监听地图点击事件,实时获取点击地点对应的经纬度;
  • 监听文本框输入经纬度值,在地图中渲染目标地点;




你可能感兴趣的:(Vue,前端,vue.js,javascript,前端)