当前位置： 首页 > news >正文

vue3开发高德地图

news 2026/2/10 12:21:20

在vue3的index.html

使用动态注入地址名和key

<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.6&key=%VITE_MAP_KEY%"></script><script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.15&plugin=AMap.Driving&plugin=AMap.ControlBar&plugin=AMap.MapType,AMap.PolyEditor,AMap.CircleEditor,AMap.HeatMap&key=%VITE_MAP_KEY%"></script><script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.6&plugin=AMap.DistrictSearch&key=%VITE_MAP_KEY%"></script><script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.6&plugin=AMap.MouseTool&key=%VITE_MAP_KEY%"></script><script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.15&plugin=AMap.ControlBar&key=%VITE_MAP_KEY%"></script><script type="module" src="/src/main.js"></script></body>
</html>

在对应的开发环境中注入对的地址和key,比如在.env.development(开发环境)

VITE_NODE_ENV='development'
# 后端链接地址
VITE_APP_URL='http://www.taobao.com'
# 如果使用了CJS,不知道报错日志，脚本显示报错日志    --vite官网/指引/故障排除/CJS
VITE_CJS_TRACE=true
# 忽略CJS警告
# VITE_CJS_IGNORE_WARNING=true
# 高德API
VITE_MAP_ULR=''
# 高德地图key
VITE_MAP_KEY=''

因为请求高德会报跨域，所以在vite中使用代理地址

server: {open: true,// port: 3000,proxy: {'^/maps': {target: 'http://webapi.amap.com/',changeOrigin: true}}},

在对应的页面中引入高德地图

<template><div class="home"><div id="container"></div><div id="map_move"><div class="mapzoom" title="拖动移动"><svg-icon name="moveMap"></svg-icon></div><div class="mapzoom" title="画多边形" @click="createPolygon"><svg-icon name="polygon"></svg-icon></div><div class="mapzoom" title="画折线"><svg-icon name="brokenLine"></svg-icon></div></div><div id="mapzoom"><div class="mapzoom" title="缩小" @click="mapMinZoom"><el-icon><ZoomOut /></el-icon></div><div class="mapzoom" title="放大" @click="mapMaxZoom"><el-icon><ZoomIn /></el-icon></div><div class="mapzoom" title="初始位置" @click="mapInitZoom"><el-icon><Location /></el-icon></div><div class="mapzoom" title="暗黑模式" @click="mapSetStyle"><el-icon><Sunny v-if="data.dark" /><Moon v-else /></el-icon></div></div></div>
</template><script setup>
import { onMounted, ref, reactive } from 'vue'
import { mapInit, addDrawingManager } from '@/utils/mapSetting'
const mapConfig = ref({location: [113.000321, 23.033159],zoom: 11,viewMode: '3D'
})
const data = reactive({map: '',dark: '',polyEditor: ''
})
onMounted(() => {init()addDrawTool()
})const init = () => {data.map = mapInit(mapConfig.value, 'container')
}
// 缩小
const mapMinZoom = () => {data.map.setZoom(data.map.getZoom() - 1)
}
// 放大
const mapMaxZoom = () => {data.map.setZoom(data.map.getZoom() + 1)
}
// 回到最初的中心点
const mapInitZoom = () => {data.map.setZoomAndCenter(mapConfig.value.zoom, mapConfig.value.location)
}
// 场景切换
const mapSetStyle = () => {data.dark = !data.darklet styleName = 'amap://styles/'if (data.dark) {styleName = styleName + 'dark'data.map.setMapStyle(styleName)} else {styleName = styleName + 'normal'data.map.setMapStyle(styleName)}
}
const addDrawTool = () => {const styleOption = {strokeColor: "#FF33FF",strokeOpacity: 0.2,fillColor: "#1791fc",fillOpacity: 0.4,strokeWeight: 3}data.polyEditor = addDrawingManager()
}
// 开始画图
const createPolygon = () => {data.polyEditor.close()data.polyEditor.setTarget()data.polyEditor.open()
}
</script><style lang="scss" scoped>
.home {width: 100%;height: 100vh;
}
#container {width: 100%;height: 100vh;
}
#mapzoom {position: absolute;top: 120px;right: 10px;display: flex;flex-direction: column;align-items: flex-end;
}
.mapzoom {width: 25px;height: 25px;color: #409eff;background-color: #fff;line-height: 25px;text-align: center;border-radius: 2px;margin-top: 5px;border: 1px solid #dfdfdf;cursor: pointer;
}
#map_move{position: absolute;top: 120px;right: 300px;display: flex;align-items: flex-end;
}
</style>

封装的高德方法

/***? 加载地图*/
import { reactive } from 'vue'
const data = reactive({map: '',polyEditor: '',mouseTool: '',polygon: '', // 覆盖物location: {lng: '',lat: ''},path: []
})
export const mapInit = (mapConfig, dom) => {data.map = new AMap.Map(dom, {viewMode: mapConfig.viewMode, // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'zoom: mapConfig.zoom, // 初始化地图层级center: mapConfig.location, // 初始化地图中心点})data.map.on("click", showInfoClick)return data.map
}/***@description 获取点击的经纬度*/export function showInfoClick(e) {console.log('e', e)data.location.lng = e.lnglat.getLng() //记录最后一次点击的经纬度data.location.lat = e.lnglat.getLat()
}/***! 添加画图工具*/export const addDrawingManager = () => {if (data.polyEditor) {//判断存在多边形围栏就先取消编辑并清除之前画的多边形围栏data.polyEditor.close()}data.polyEditor = new AMap.PolygonEditor(data.map)data.polyEditor.on('add', function (attr) {console.log(data);let polygon = attr.target;data.polyEditor.addAdsorbPolygons(polygon)polygon.on('dblclick', () => {data.polyEditor.setTarget(polygon);data.polyEditor.open()})})return data.polyEditor}

相关文章：

vue3开发高德地图

在vue3的index.html 使用动态注入地址名和key <html lang"en"><head><meta charset"UTF-8" /><link rel"icon" type"image/svgxml" href"/vite.svg" /><meta name"viewport" conten…...

编程日记 2024/6/1 21:39:45

通过DLL方式链接glfw3.dll

主要是CMakeLists.txt文件变化 cmake_minimum_required(VERSION 3.10) project(glfwTest) set(CMAKE_CXX_STANDARD 11) aux_source_directory(. SRC_SOURCES) set(GLFW_INCLUDE_DIR ${CMAKE_SOURCE_DIR}/include) set(GLFW_LIBRARY_DIR ${CMAKE_SOURCE_DIR}/lib/glfw) add_ex…...

编程日记 2024/6/1 21:38:43

Python自然语言处理（NLP）库之NLTK使用详解

概要 自然语言处理（NLP）是人工智能和计算机科学中的一个重要领域，涉及对人类语言的计算机理解和处理。Python的自然语言工具包（NLTK，Natural Language Toolkit）是一个功能强大的NLP库，提供了丰富的工具和数据集，帮助开发者进行各种NLP任务，如分词、词性标注、命名实体…...

编程日记 2024/6/1 21:35:40

sqoop操作

介绍 sqoop是隶属于Apache旗下的, 最早是属于cloudera公司的,是一个用户进行数据的导入导出的工具, 主要是将关系型的数据库(MySQL, oracle...)导入到hadoop生态圈(HDFS,HIVE,Hbase...) , 以及将hadoop生态圈数据导出到关系型数据库中 操作 将数据从mysql中导入到HDFS中 1.全量…...

编程日记 2024/6/1 21:33:36

【Qt秘籍】[002]-开始你的Qt之旅-下载

一、Qt的开发工具有哪些&#xff1f; Qt的开发工具概述Qt支持多种开发工具&#xff0c;其中最常见的开发工具是 1.QtCreator 【易上手/有少量bug/适合新手】 2.VisualStudio 【功能强大/易出错/需要更多额外配置】 3.Eclipse 【清朝老兵IDE/不建议使用】 【注意&#xff1…...

编程日记 2024/6/1 21:32:34

【自动驾驶】点与向量从ego系转odometry系

1.点从ego系转odometry系（ego -> odometry） struct Point {float x;float y;float angle; }; Point trans; // is the odom to ego transform Point odom_coord; is the odom coord Point ego_coord; is the ego coordfloat odom_coord.x = (ego_coord.x - trans.x) * st…...

编程日记 2024/6/1 21:31:33

jsmug：一个针对JSON Smuggling技术的测试PoC环境

关于jsmug jsmug是一个代码简单但功能强大的JSON Smuggling技术环境PoC&#xff0c;该工具可以帮助广大研究人员深入学习和理解JSON Smuggling技术&#xff0c;并辅助提升Web应用程序的安全性。 背景内容 JSON Smuggling技术可以利用目标JSON文档中一些“不重要”的字节数据实…...

编程日记 2024/6/1 21:29:31

Qt 控件提升

什么是控件提升&#xff08;Widget Promotion&#xff09; 控件提升是一个在Qt编程中常见但容易被忽视的概念。简单来说&#xff0c;控件提升就是将一个基础控件&#xff08;Base Widget&#xff09;转换为一个更特定、更复杂的自定义控件&#xff08;Custom Widget&#xff09…...

编程日记 2024/6/1 21:28:30

封装一个websocket，支持断网重连、心跳检测，拿来开箱即用

封装一个websocket&#xff0c;支持断网重连、心跳检测 代码封装 编写 WebSocketClient.js import { EventDispatcher } from ./dispatcherexport class WebSocketClient extends EventDispatcher {constructor(url) {console.log(url, urlurl)super()this.url url}// #soc…...

编程日记 2024/6/1 21:26:29

推荐一款开源电子签章/电子合同系统

文章目录 前言一、项目介绍二、项目地址三、技术架构四、代码结构介绍五、功能模块六、功能界面首页面手写签名面板电子印章制作数字证书生成 总结 前言 大家好&#xff01;我是智航云科技&#xff0c;今天为大家分享一个免费开源的电子签字系统。 一、项目介绍 开放签电子签…...

编程日记 2024/6/1 21:25:28

Qt Creator（Qt 6.6）拷贝一行

Edit - Preference - Environment&#xff1a; 可看到&#xff0c;拷贝一行的快捷键是&#xff1a; ctrl Ins...

编程日记 2024/6/1 21:24:26

红队内网攻防渗透：内网渗透之数据库权限提升技术

红队内网攻防渗透 1. 内网权限提升技术1.1 数据库权限提升技术1.1.1 数据库提权流程1.1.1.1 先获取到数据库用户密码1.1.1.2 利用数据库提权工具进行连接1.1.1.3 利用建立代理解决不支持外联1.1.1.4 利用数据库提权的条件及技术1.1.2 Web到Win-数据库提权-MSSQL1.1.3 Web到Win-…...

编程日记 2024/6/1 21:23:25

从0开始制作微信小程序

目录 前言 正文 需要事先准备的 需要事先掌握的 什么是uniapp 平台应用的分类方式 什么是TypeScript 创建项目 项目文件作用 源码地址 尾声 &#x1f52d; Hi,I’m Pleasure1234&#x1f331; I’m currently learning Vue.js,SpringBoot,Computer Security and so on.&#x1…...

编程日记 2024/6/1 21:22:24

Linux学习笔记:日志文件的编写

日志文件Log.hpp 日志文件的作用简单的日志文件编写 日志文件的作用 日志文件可以很好的帮我们显示出程序运行的信息,例如,进程pid,运行时间,运行状况等,通过日志记录程序的执行路径、变量值、函数调用等&#xff0c;可以帮助我们快速定位和修复代码中的错误。 简单的日志文件…...

编程日记 2024/6/1 21:20:22

为什么要保持方差为1

1.数值稳定性&#xff1a; 在机器学习和深度学习中&#xff0c;维持激活函数输入的方差在一个合理范围内&#xff08;如1&#xff09;是很重要的&#xff0c;这有助于防止在训练过程中发生梯度消失或梯度爆炸的问题。如果方差过大或过小&#xff0c;经过多层网络后输出结果的方…...

编程日记 2024/6/1 21:19:21

Wpf 使用 Prism 实战开发Day31

登录数据绑定 1.首先在LoginViewModel 登录逻辑处理类中&#xff0c;创建登录要绑定属性和命令 public class LoginViewModel : BindableBase, IDialogAware {public LoginViewModel(){ExecuteCommand new DelegateCommand<string>(Execure);}public string Title { ge…...

编程日记 2024/6/1 21:17:18

Linux权限提升二

#应用场景&#xff1a; 获取到Web权限或普通用户在Linux服务器上时进行的SUID&SUDO提权 SUID (Set owner User ID up on execution)是给予文件的一个特殊类型的文件权限。在Linux/Unix中&#xff0c;当一个程序运行的时候&#xff0c;程序将从登录用户处继承权限。SUID被定…...

编程日记 2024/6/1 21:16:17

[AI OpenAI] 推出ChatGPT Edu

一种负担得起的解决方案&#xff0c;帮助大学将AI负责任地引入校园。 我们宣布推出ChatGPT Edu&#xff0c;这是一个专为大学设计的ChatGPT版本&#xff0c;旨在负责任地向学生、教职员工、研究人员和校园运营部署AI。ChatGPT Edu由GPT-4o提供支持&#xff0c;能够跨文本和视觉…...

编程日记 2024/6/1 21:12:13

HTML5+CSS3回顾总结

一、HTML5新特性 1.语义化标签 <header> 头部标签<nav> 导航标签<article> 内容标签<section> 定义文档某个区域<aside> 侧边栏标签<footer> 尾部标签 2.多媒体标签 2.1视频标签vedio 》常规写法&#xff08;尽量都使用mp4&#xff0…...

编程日记 2024/6/1 21:11:12

AI推介-多模态视觉语言模型VLMs论文速览（arXiv方向）：2024.05.01-2024.05.10

文章目录~ 1.Pseudo-Prompt Generating in Pre-trained Vision-Language Models for Multi-Label Medical Image Classification2.VLSM-Adapter: Finetuning Vision-Language Segmentation Efficiently with Lightweight Blocks3.Memory-Space Visual Prompting for Efficient …...

编程日记 2024/6/1 21:10:11

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2026/2/4 23:47:47

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/1/31 7:23:48

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2026/2/10 5:05:24