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

vue3开发高德地图

news 文章来源：https://blog.csdn.net/weixin_44072254/article/details/139373520 2024/9/21 0:37:38

在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

主要是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的开发工具有哪些？ Qt的开发工具概述Qt支持多种开发工具，其中最常见的开发工具是 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，该工具可以帮助广大研究人员深入学习和理解JSON Smuggling技术，并辅助提升Web应用程序的安全性。背景内容 JSON Smuggling技术可以利用目标JSON文档中一些“不重要”的字节数据实…...

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

Qt 控件提升

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

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

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

封装一个websocket，支持断网重连、心跳检测代码封装编写 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

Qt Creator（Qt 6.6）拷贝一行

Edit - Preference - Environment： 可看到，拷贝一行的快捷键是： 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 创建项目项目文件作用源码地址尾声 🔭 Hi,I’m Pleasure1234🌱 I’m currently learning Vue.js,SpringBoot,Computer Security and so on.&#x1…...

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

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

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

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

为什么要保持方差为1

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

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

Wpf 使用 Prism 实战开发Day31

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

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

Linux权限提升二

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

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

[AI OpenAI] 推出ChatGPT Edu

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

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

HTML5+CSS3回顾总结

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

Python 点云生成高程模型图(DSM)

点云生成高程模型图一、什么是DSM?二、python代码三、结果可视化一、什么是DSM? DSM（Digital Surface Model）是一种数字高程模型，通常用于描述地表地形的数字化表示。它是由一系列离散的高程数据点组成的三维地形模型，其中每个点都具有其相应的高程值。 DSM主要用于…...

编程日记 2024/6/1 21:07:08

[第五空间 2021]WebFTP

题目是WebFTP 通过标签可以看出git泄露(git泄露是指开发人员利用git进行版本控制) 通过网上了解WebFTP的源码账号admin 密码admin888 进去之后正常思路是我们利用/.git 在githack里面进行复现查看log看看有没有flag 但是经过我们查询之后不是这样子通过一段时间摸索在phpinf…...

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

SQL—DQL（数据查询语言）之小结

一、引言在前面我们已经学习完了所有的关于DQL（数据查询语言）的基础语法块部分，现在对DQL语句所涉及的语法，以及需要注意的事项做一个简单的总结。二、DQL语句 1、基础查询注意： 基础查询的语法是：SELE…...

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

找回xmind文件办法:一切意外均可找回(误删/重启关机等)

我周三编辑完，周四下午评审完用例忘记保存结果到了快乐星期五，由于是周五我太开心了...早上到公司后觉得电脑卡，直接点了重启啥都没保存啊啊啊啊啊准备上传测试用例时才想起来我的用例找不见了！！！&…...

编程日记 2024/6/1 21:03:02

微信小程序 npm构建+vant-weaap安装

微信小程序：工具-npm构建报错解决： 1、新建miniprogram文件后，直接进入到miniprogram目录，再次执行下面两个命令，然后再构建npm成功 npm init -y npm install express（Node js后端Express开发&#xff…...

编程日记 2024/6/1 21:02:01

【LeetCode 63】不同路径 II

1. 题目 2. 分析这道题比较典型，跟最小路径和是同样的思想。比较简单。 3. 代码 class Solution:def uniquePathsWithObstacles(self, obstacleGrid: List[List[int]]) -> int:row len(obstacleGrid)col len(obstacleGrid[-1]) dp [[0] *(col) f…...

编程日记 2024/6/1 20:59:59

OpenAI助手API接入-问答对自动生成

支持GPT-3.5-Turbo, GPT-4o, GPT-4-Turbo import json import openai from pathlib import Path import os client openai.OpenAI(base_urlbase_url, api_keyapi_key) file client.files.create( fileopen("H3.pdf", "rb"), purposeassistants ) …...

编程日记 2024/6/1 20:57:56

9. C++通过epoll+fork的方式实现高性能网络服务器

epollfork 实现高性能网络服务器一般在服务器上，CPU是多核的，上述epoll实现方式只使用了其中的一个核，造成了资源的大量浪费。因此我们可以将epoll和fork结合来实现更高性能的网络服务器。创建子进程函数–fork( ) 要了解线程我们先来了解…...

编程日记 2024/6/1 20:55:54

【Mac】XMind for mac（XMind思维导图）v24.04.10311软件介绍和安装教程

软件介绍 XMind for Mac是一款功能强大的思维导图软件。它具有以下主要特点： 1.多样化的思维导图功能：XMind for Mac提供了丰富的思维导图编辑功能，用户可以创建各种类型的思维导图，包括组织结构图、逻辑图、时间轴图等&#xf…...

编程日记 2024/6/1 20:51:49

使用 Django ORM 进行数据库操作

文章目录创建Django项目和应用定义模型查询数据更新和删除数据总结与进阶聚合和注解跨模型查询原始SQL查询 Django是一个流行的Web应用程序框架，它提供了一个强大且易于使用的对象关系映射（ORM）工具，用于与数据库进行交互。在本文…...

编程日记 2024/6/1 20:50:48

行为型设计模式之模板模式

文章目录概述原理结构图实现小结概述模板方法模式(template method pattern)原始定义是：在操作中定义算法的框架，将一些步骤推迟到子类中。模板方法让子类在不改变算法结构的情况下重新定义算法的某些步骤。模板方法中的算法可以理解为广义上的业…...

编程日记 2024/6/1 20:49:46

大泽动力车载柴油发电机的特点和优势有哪些

大泽动力车载柴油发电机具有一系列显著的特点和优势，以下是对其的详细介绍： 低噪音性能：大泽动力车载柴油发电机具备明显的低噪音性能，其噪音限值在距离机组7米处测得为70dB(A)，这为用户提供了一个相对安静的工作环境…...

编程日记 2024/6/1 20:48:45

基于 IP 的 DDOS 攻击实验

一、介绍基于IP的分布式拒绝服务（Distributed Denial of Service, DDoS）攻击是一种利用大量受控设备（通常是僵尸网络）向目标系统发送大量请求或数据包，以耗尽目标系统的资源，导致其无法正常提供服务的攻击…...

编程日记 2024/6/1 20:47:44

GPT-4o如何重塑AI未来！

如何评价GPT-4o? 简介：最近，GPT-4o横空出世。对GPT-4o这一人工智能技术进行评价，包括版本间的对比分析、GPT-4o的技术能力以及个人感受等。 GPT-4o似乎是一个针对GPT-4模型进行优化的版本，它在性能、准确性、资源效率以及安全和…...

编程日记 2024/6/1 20:43:40

window本地域名映射修改

位置 C:\Windows\System32\drivers\etc 文件名 hosts 修改方法复制一份到桌面修改桌面的文件 # 前面为ip 后面为域名，域名-》ip的映射 127.0.0.1 link.com最后将修改后的文件保存，复制到C:\Windows\System32\drivers\etc替换...

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

【退役之重学】为什么要加入多级缓存

一、为什么加入多级缓存是为了提高数据访问的效率和性能二、怎么做在多级访问系统中，数据首先会被存储在速度最快的 L1 缓存中，如果数据在 L1 缓存中未命中，则会继续在 L2 缓存和 L3 缓存中查找，如果在所有缓存中都未命中&…...

编程日记 2024/6/1 20:39:34

Redis常用命令大全

目录 1、五大数据类型的基本命令 1.1 字符串 1.2 列表 1.3 哈希 1.4 集合 1.5 有序集合 2、与key相关 2.1 查看redis数据的类型 2.2 查看当前redis库中的所有key命令 3、除了五大数据类型外常见命令 3.1 键操作 3.2 服务器操作 3.3 连接操作 3.4 发布/订阅 3.5 事…...

编程日记 2024/6/1 20:38:33

HttpSecurity 是如何组装过滤器链的

有小伙伴们问到这个问题，简单写篇文章和大伙聊一下。一 SecurityFilterChain 首先大伙都知道，Spring Security 里边的一堆功能都是通过 Filter 来实现的，无论是认证、RememberMe Login、会话管理、CSRF 处理等等，各种功能都是通…...

编程日记 2024/6/1 20:36:30

STM32 入门教程（江科大教材）#笔记2

3-4按键控制LED /** LED.c**/ #include "stm32f10x.h" // Device headervoid LED_Init(void) {/*开启时钟*/RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE); //开启GPIOA的时钟/*GPIO初始化*/GPIO_InitTypeDef GPIO_InitStructure;GPIO_I…...

编程日记 2024/6/1 20:35:29

python zip()函数（将多个可迭代对象的元素配对，创建一个元组的迭代器）zip_longest()

文章目录 Python zip() 函数深入解析基本用法函数原型基础示例处理不同长度的迭代器高级用法多个迭代器使用 zip() 与 dict()解压序列注意事项内存效率：zip() 返回的是一个迭代器，这意味着直到迭代发生前，元素不会被消耗。这使得 zip() 特别…...

编程日记 2024/6/1 20:33:27

React.forwardRef 使用

React.forwardRef 是一个React提供的高阶组件函数，用于向函数组件传递ref。在函数组件中无法直接访问ref，如果需要在函数组件中操作子组件的DOM元素或组件实例，就可以使用React.forwardRef来转发ref给子组件。当使用React.forwardRef包裹一…...

编程日记 2024/6/1 20:30:24

C# 中的值类型与引用类型：内存大小解析

在 C# 中，类型可以被归类为值类型或引用类型，它们在内存中的存储和管理方式不同。了解这些差异对于优化程序性能和资源管理至关重要。值类型 (Value Types) 值类型包括所有内置的数值类型（如 int, double 等）、char 类型、bool…...

编程日记 2024/6/1 20:29:23

object对象列表使用sorted函数按照对象的某个字段排序

在Python中，如果你想要根据列表中对象的某个属性（比如create_time）来进行逆序排序，你可以使用sorted()函数并指定一个key参数。key参数应该是一个函数，该函数接受一个列表元素并返回一个用于排序的值。假设你的objec…...

编程日记 2024/6/1 20:25:18

【再探】设计模式—中介者模式、观察者模式及模板方法模式

中介者模式让多对多的复杂引用关系变成一对多，同时能通过中间类来封装多个类中的行为，观察者模式在目标状态更新时能自动通知给订阅者，模版方法模式则是控制方法的执行顺序，子类在不改变算法的结构基础上可以扩展功能实现。 1 中…...

编程日记 2024/6/1 20:24:17

vue中使用svg图像

一、svg图像是什么 SVG（可缩放矢量图形）是一种图像格式，它以XML文档的形式存在，用以描述图像中的形状、线条、文本和颜色等元素。由于其基于矢量的特性，SVG图像在放大或改变尺寸时能够保持图形质量不受影响。这种格式…...

编程日记 2024/6/1 20:23:16

Deconfounding Duration Bias in Watch-time Prediction for Video Recommendation

Abstract 观看时间预测仍然是通过视频推荐加强用户粘性的关键因素。然而，观看时间的预测不仅取决于用户与视频的匹配，而且经常被视频本身的持续时间所误导。为了提高观看时间，推荐总是偏向于长时间的视频。在这种不平衡的数据上训练的模型面…...

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

python多进程

python多进程的使用有两种方式： multiprocessingconcurrent的使用方式 multiprocessing的使用方式定义线程池的数量开始处理，结果回调下面以多进程下载图像为例： import multiprocessing import requests from io import BytesIO from…...

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