【vue】移动端H5+腾讯地图，实现地图选取坐标点获取位置信息

糖葫芦biu

已于 2023-12-08 09:40:07 修改

阅读量4.4k

点赞数 22

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript less

于 2023-12-06 16:10:38 首次发布

本文链接：https://blog.csdn.net/weixin_44120523/article/details/134830627

H5：地图选取坐标点获取位置信息

前言

本篇主要内容是使用腾讯地图+逆地址解析的方式实现地图选取坐标点获取位置信息，未使用腾讯地图的前端选点组件，如需了解更多腾讯地图API，请关注官网文档

准备工作

1、登录/注册腾讯地图放平台，已登录的直接进入控制台
腾讯地图开放平台

2、创建应用，已有应用的可跳过

创建腾讯地图应用
填写腾讯地图应用信息

3、添加key

添加腾讯地图应用Key信息
填写腾讯地图应用Key信息
注意：key是腾讯开发文档免费获取的，如果您配置了域名，后面调取/渲染地图时，出现跨域或者显示不出来的问题，记得把腾讯地图的域名也加入，一般用到的是 map.qq.com、3gimg.qq.com、mapapi.qq.com，根据自己的实际需求来配置即可。

代码片段

以下使用vue

html

<!--引入的vant样式-->
<link rel="stylesheet" href="./css/vant.min.css">

<!--核心HTML代码-->
 <block v-if="mapStatus">
 	<!--地图-->
 	<div id="container" :style="{width: clientW+'px', height: clientH+'px'}"></div>
 	<div class="my-btn" @click="mapStatus = false">
		<p>返回</p>
	</div>	
 </block>
 <block v-else>
 	<!--页面内容-->
 	<div>
		<div class="item-address">
         <p><span>地址：</span>{
  
  {address}}</p>
    	</div>
	</div>
	<div @click="openMap">地图选择地址</div>
 </block>





<!--引入的js样式-->
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.min.js"></script>