简介: vue3使用高德地图实现点击获取经纬度以及搜索功能 话不多说直接上干活 在此之前你需要有高德地图的key,这个自己去申请即可 1,首先需要在终端安装 npm i @amap/amap-jsapi-loader --save 2,准备一个容器 <template> </template> #container{ padding:0px; margin: 0px; width: 100%; height: 800...
center: tempCenter//初始化地图中心点位置})//如果父组件传入了有效值 回显一个iconif(props.defaultPoint.length > 0) { address.value=props.defaultAddress point.value=props.defaultPoint addMarker() }//地图点击事件map.value.on('click', clickMapHandler)//引入高德地图的空间绑定使用map.value.addContro...
//点击点标记const clickMapPoint = (e: any) =>{ infoWindow.value.setContent(e.target.content); infoWindow.value.open(mapObj.value, e.target.getPosition()); } 2. 外部点击展示点位并打开该点位的信息窗体 需求:点击右侧图片,定位到对应的点上,然后打开信息窗体 //点击图片const showPoint = (item...
vue3+高德地图 1:整体显示 <template> </template> import AMapLoader from "@amap/amap-jsapi-loader"; import { reactive } from "vue-demi"; const state = reactive({ path: [], current_position: [], }); //进行地图初始化 function initMap()...
第一步:完善高德地图 api 的基本配置 先注册开发者账号,进入应用管理界面,应用管理界面就是咱右上角的那个头像,hover 之后会有个弹窗,找到「应用管理」点击进入。 找到右侧的「应用管理」菜单,点开后选择我的应用。 点击右上角创建新应用,应用类型看自己软件的定位。
地图上点击某一位置,或者输入内容之后点击搜索按钮,地图上相关位置会出现点标记 点击右下角确定按钮,选择位置弹窗关闭,将点标记的名称和经纬度返回到新增操作弹窗 代码实现 新增,点击位置输入框出现弹框 <el-input v-model="address"placeholder="请选择位置"@focus="openMap"/> ...
实现:例如像这样,只展示厦门的地图,隐藏其他地方,点击区域,在单独展示区,点击返回回到总览。 一、获取高德地图的key,和密钥 地址:高德控制台 具体的获取流程就不教授了,百度很多 二、安装 npm i @amap/amap-jsapi-loader --save 三、引入使用 要注意的是,因为使用了行政服务搜索的api,它的search()方法要有回...
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听, 否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/ import { shallowRef } from '@vue/reactivity'; import {ref} from "vue"; ...
default: 'baidu', // 地图类型 默认1.tianditu天地图/2.baidu百度地图/3.tencent腾讯地图/4.amap高德地图 }, }, emits: ['point'], setup(props, context) { // 密钥 const common_amap_map_ak = 'xxxxxxxxxxx'; const common_amap_map_safety_ak = 'xxxxxxxxxx'; const common_baidu_map_ak = ...