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

vue3开发高德地图

news 2026/2/10 17:52:42

在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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2026/1/23 4:56:05

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2026/1/29 20:58:41

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2026/2/1 7:18:47

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09