1 2 3 4 // 地址 const map_address = ref(''); // 地图类型 const map_type = ref('tianditu'); 组件回调: 1 2 3 4 5 //地图用于回调用于获取坐标 const map_point = (lng: number, lat: number) => { form.lng = lng; form.lat = lat; }; 地图效果展示: 分类: vue3 标签: 吃...
简介: vue3使用高德地图实现点击获取经纬度以及搜索功能 话不多说直接上干活 在此之前你需要有高德地图的key,这个自己去申请即可 1,首先需要在终端安装 npm i @amap/amap-jsapi-loader --save 2,准备一个容器 <template> </template> #container{ padding:0px; margin: 0px; width: 100%; height: ...
importAMapfrom'AMap'// 引入高德地图import{ onMounted }from'vue'exportdefault{name:'Login',setup() {onMounted(() =>{constmap =newAMap.Map('container', {// 这里表示创建地图 第一个参数表示地图的div的idresizeEnable:true// 表示是否在加在所在区域的地图,如果定了别的区域,比如北京,就会默认加载北京...
在地图中点击某一个位置获取当前点击位置经纬度以及位置信息。 需要稍微注意的是,因为场景比较简单,所以本文所写的关键字搜索是指直接在输入框进行输入点击搜索,中心点会直接更改。并不会出现下图红框所勾选的列表。 关键字搜索.jpg 当前项目版本以及使用 记录当前项目关于高德地图的使用,不唯一,可以有多种版本与引用...
第二步:在 vue3 项目中使用高德地图 api 复制刚刚创建好的 key。 在pulic/index.html 通过 CDN 引入高德地图 api。 ps:CDN 在这里的意指通过链接加载的某些组件库,而不是通过 npm,组件通过 CDN 加载可以启到一定程度的加速效果。 在项目根目录创建文件 vue.config.js ,注意配置文件最好别用 ts,在 js ...
第二步:在 vue3 项目中使用高德地图 api 复制刚刚创建好的 key。 在pulic/index.html 通过 CDN 引入高德地图 api。 ps:CDN 在这里的意指通过链接加载的某些组件库,而不是通过 npm,组件通过 CDN 加载可以启到一定程度的加速效果。 在项目根目录创建文件 vue.config.js ,注意配置文件最好别用 ts,在 js ...
简介: vue3高德地图+搜索+点击获取经纬度 首先 安装依赖 npm i @amap/amap-jsapi-loader --save html(设置一个容器)点击位置控制台可以打印到数据 如果想要回显到input 只需在input内绑定v-modal即可 <template> 搜索 </template> script //引入 import {onMounted,ref,reactive} from 'vue'; import...