一、使用步骤

1.申请key

2.引入库

在vue的index.html的head里面加上这个

添加 div 标签作为地图容器，同时为 div 指定 id 属性
代码如下（示例）：

<template><div class="app-container" ><div id="container" class="map-container"></div>
</div></template><!-- 腾讯地图 --><script setup >import { onMounted, onBeforeUnmount } from 'vue';//向父页面传递参数var emit = defineEmits();onMounted(() => {nextTick(() => {initMap()});});function initMap() {//设置中心点坐标var center = new TMap. LatLng(26.294274,107.442953); //初始化地图var map = new TMap.Map('container', {center: center,zoom: 17.2,   //设置地图缩放级别});// 从地图容器移出默认控件,// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); // 从地图容器移出 缩放控件,// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); // 从地图容器移出 比例尺控件,// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); // 从地图容器移出 旋转控件,//创建并初始化MultiMarker:表示地图上的多个标注点,var markerLayer = new TMap.MultiMarker({id: 'marker-layer',map: map, //指定地图容器geometries: []//点数组});//监听点击事件添加markermap.on("click", (evt) => {var lat;var lng;var lat_lng;//添加一个markerif (markerLayer.geometries.length == 0 || markerLayer==null) {markerLayer.add({position: evt.latLng});//把你在图层上标记的点的经纬度存起来，需要的话把它显示在页面上lat = evt.latLng.getLat().toFixed(6);lng= evt.latLng.getLng().toFixed(6);//向页面传递参数lat_lng = lat + "," + lng;emit('lat_lng', lat_lng);}else{var id = markerLayer.geometries[0].id;// 移除为该id的点标记markerLayer.remove(id); }});}//父调子方法function clearMarker(){if(markerLayer!=undefined && markerLayer.geometries.length>0){var id = markerLayer.geometries[0].id;// 移除为该id的点标记markerLayer.remove(id);}}</script><style lang="scss" scoped>.map-container {width: 100%;height: 50vh;border-radius: 16px;:deep(.info-card) {position: relative;padding: 15px 25px;background-color: #fff;border-radius: 30px;font-family: PingFangSC-Medium;font-weight: 500;font-size: 22px;color: #19193e;&::after {content: '';border-width: 15px;position: absolute;left: 50%;bottom: -50%;transform: translateX(-50%);border-style: solid dashed dashed;border-color: #fff transparent transparent transparent;}}}</style>

父页面引用组件
1、A页面想要引用B页面，则在A页面把B页面变成组件（components）使用；
2、A向B传参数，A页面在使用组件的时候传递参数（:xx=‘yy’），B页面用props接收参数对象；
3、B向A返回结果，用$emit返回结果。A页面在使用组件的时候@xxx接收结果

import TencentMap from '@/components/TencentMap';
<!-- 地图组件 -->
<el-dialog append-to-body
:fullscreen="false"
:show-close="true"
v-model="modelMsg"
width="45%"
height="25%"><TencentMap v-if="showMap" ref="tencentMap" @lat_lng='lat_lng'></TencentMap></el-dialog>//@xxx接收页面传过来的结果function lat_lng(data){console.log(data);}//父组件调用子组件的方法tencentMap.value.clearMarker()

总结

本文记录自己在开发过程中使用vue3+腾讯地图。

vue使用腾讯地图(拾取坐标）相关推荐

腾讯地图拾取坐标html,腾讯地图Api 实现拾取坐标功能示例
一.注册Api账号,引用js库二.编写坐标拾取js代码和html代码 //按钮定义 *坐标: 经度纬度点击坐标拾取 //弹出框定义 × 拖动位置标记设置坐标确定 js代码示例 //选择坐标处理 ...
腾讯地图拾取坐标html,记录腾讯地图点击地图获取标注坐标
传递事件参数 *{ margin:0px; padding:0px; } body, button, input, select, textarea { font: 12px/16px Verdana ...
vue使用腾讯地图获取经纬度和逆解析获取详细地址
vue使用腾讯地图获取经纬度和逆解析获取详细地址示例必须在腾讯api中申请自己的key 打开这个webservice用来逆解析详细地址下面是代码 1 , html创建放地图的容器 <div ...
百度地图拾取坐标工具-toolfk程序员在线工具
本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果.Tool ...
vue h5 腾讯地图路线规划
vue h5腾讯地图定位传送门代码如下:在微信浏览器中会弹出是否打开第三方点击取消则打开内置腾讯点击去则跳转腾讯地图app location.href = https://apis.map.q ...
vue 调用腾讯地图 https://apis.map.qq.com/ws/place/v1/suggestion/
vue 调用腾讯地图 1.先安装依赖 npm install jsonp 2. 新建一个jsonp.js 文件 3. 以下代码放到jsonp.js文件里 exports.install = funct ...
vue 集成腾讯地图基础api Demo集合
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记) 写作背景 .之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大 ...
vue接入腾讯地图(二)【标注定位实战】
vue接入腾讯地图(一)[点击事件]请参考: https://blog.csdn.net/weixin_45628602/article/details/108401673 1.[标注] 添加标注 v ...
微信小程序map 地图引入配置+腾讯地图地址坐标解析
最终效果一.要实现的功能展示地图. 参考map组件在地图上展示多个店铺. marker标记点用于在地图上显示标记的位置. 点击店铺放大图标,展示选择的店铺信息. 更改选择店铺的标记尺寸大小. 在 ...

vue使用腾讯地图(拾取坐标）

文章目录

一、使用步骤

1.申请key

2.引入库

总结

vue使用腾讯地图(拾取坐标）相关推荐

最新文章

热门文章