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

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

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

最终实现效果如下：

实现细节

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100