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

vue3开发高德地图

news 2025/7/4 22:51:17

在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

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/6/20 13:53:42

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/7/4 0:18:53

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/7/4 12:08:14

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/6/26 10:09:45

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/6/21 2:09:08

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/7/4 11:34:06

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/6/21 18:07:22

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/6/21 16:37:38

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/6/21 5:00:15

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/7/2 16:01:30