vue3开发高德地图

在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}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/20356.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【debian】常用指令

Debian是一个广受欢迎的自由和开源的操作系统&#xff0c;它使用Linux内核或者FreeBSD内核。Debian以其稳定性和安全性而闻名&#xff0c;是许多其他发行版如Ubuntu的基础。本文将介绍一些Debian系统中常用的命令&#xff0c;帮助用户更有效地使用和管理他们的Debian系统。 ap…

高可用数据库架构:互备(Multi-Master)技术详解

大家好,我是你们的小米,今天咱们来聊聊分布式系统中的一种重要容错机制——互备(Multi-Master)。这个话题可是技术圈里一个大热门,特别是在咱们追求高可用性和可靠性的数据库系统中,互备机制发挥着举足轻重的作用。今天就让小米带你一探究竟,详细了解一下互备的原理、应…

充电宝怎么选?充电宝目前什么牌子质量好耐用?盘点好用充电宝

充电宝怎么选&#xff1f;是不是很多朋友在选充电宝上非常的纠结&#xff1f;在买充电宝上面还是非常有讲究的&#xff01;市面上的充电宝虽然多&#xff0c;但是不排除很多存在安全隐患的&#xff0c;如果稍微没有挑选好充电宝的话&#xff0c;买来的充电宝极大可能是存在非常…

在 Kubesphere 中开启新一代云原生数仓 Databend

上周六&#xff0c;由 KubeSphere 社区联合 Databend 社区以及纵目科技共同组织的云原生 Meetup 北京站在北京圆满落幕。本次 Meetup 活动邀请到了 SkyWalking PMC 成员、青云科技架构及可观测性团队负责人、江苏纵目科技 APM 研发总监、青云科技容器产品经理、数元灵科技 CTO …

私有云也想要cdn加速服务怎么办?

提问&#xff1a;一个系统用的是OSS的私有云。云地址是bansheng.cdn.com/learn/2024/ww.mp4 &#xff0c;bansheng.cdn.com是cdn加速服务。 这时候通过cdn解析 将bansheng.cdn.com 外网解析到bansheng.cdn.learn.com 内网解析到oss 的bucke域名bansheng-shenzhen.aliyuncs.com …

[线程与网络] 网络编程与通信原理(四):深入理解传输层UDP与TCP协议

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (92平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;Java …

AWS需要实名吗?

AWS作为全球领先的云计算服务提供商&#xff0c;对于实名认证有着严格的要求。实名认证是指用户在使用AWS服务时需要提供真实有效的个人身份信息&#xff0c;以便AWS能够对用户的身份进行验证和管理。对于AWS而言&#xff0c;实名认证是确保用户安全和服务质量的重要环节&#…

Java——类型转换

一、类型转换 1、介绍 类型转换分为自动类型转换和强制类型转换。 2、自动类型转换 自动类型转换是指在表达式中&#xff0c;当两种不同的数据类型组合在一起时&#xff0c;较小的数据类型会自动转换为较大的数据类型&#xff0c;这个过程是自动的&#xff0c;无需编程者手…

内网穿透(Intranet Penetration)

内网穿透&#xff08;Intranet Penetration&#xff09;是一种网络技术&#xff0c;用于在局域网&#xff08;LAN&#xff09;或内部网络中访问或连接另一个局域网或外部网络的设备或服务。内网穿透技术旨在克服局域网内部设备无法直接通过公共互联网访问的限制&#xff0c;使得…

Linux---用户及权限配置

文章目录 目录 文章目录 前言 一.基本概念 二.用户管理 创建用户 修改用户属性 用户组管理 用户授权 前言 用户在操作系统中是非常重要的&#xff0c;我们登录系统&#xff0c;访问共享文件夹等都需要用户进行验证。所以&#xff0c;掌握管理用户的知识非常有必要的 一.基…

mdkarm怎么编程:深度探索与实用指南

mdkarm怎么编程&#xff1a;深度探索与实用指南 在嵌入式系统开发的浩瀚星空中&#xff0c;mdkarm编程犹如一颗璀璨的明星&#xff0c;吸引着无数开发者的目光。然而&#xff0c;对于初学者而言&#xff0c;mdkarm编程的复杂性和深度往往令人望而生畏。本文将带你走进mdkarm编…

css3 中选择器间有空格与没空格的区别?

在 CSS3 中&#xff0c;选择器间的空格与没有空格表示不同的选择逻辑&#xff1a; 1、有空格的选择器&#xff1a;空格表示后代选择器。它选择的是某个元素的所有符合条件的后代元素。 div p {color: red; }这个选择器表示选择所有 div 元素内部的 p 元素&#xff0c;无论 p …

笔墨挥毫如游龙 最是经典铁线篆——记著名书法家王子彬

真正的书法大家,必是经历了日积月累的求索磨炼,毕竟书法从来都不是一蹴而就的艺术,因此但凡是急功近利者,其人也是远远无法达到书入臻境的创作高度。而纵观当代书坛界内,其中王子彬先生的艺术声誉可谓是广为人知,作为一名深具传统功底的实力派书法大家,王子彬先生的取法历途无疑…

深度学习入门到放弃系列 - Jupyter Notebook添加虚拟环境

当使用conda创建完虚拟环境以后&#xff0c;terminal进入虚拟环境很简单&#xff0c;如何将虚拟环境添加到Notebook呢&#xff0c;这次把相关的命令记录一下。 Notebook未添加虚拟环境 添加完虚拟环境后 步骤如下&#xff1a; 安装ipykernel的命令如下&#xff1a; # 查看虚拟…

Sklearn文本特征提取

Sklearn文本特征提取 1、TF-IDF矢量化器2、英文文档计算TF-IDF3、中文文档计算TF-IDF 1、TF-IDF矢量化器 Sklearn提供了计算TF-IDF&#xff08;详见&#xff1a;传送门&#xff09;值的API&#xff1a;TfidfVectorizer&#xff08;TF-IDF矢量化器&#xff09; class sklearn.f…

BioVendor—Surfactant Protein D Human ELISA

人表面活性剂蛋白D是糖蛋白和钙依赖凝集素胶原亚家族的一员。SP-D是一种同源三聚体蛋白&#xff0c;由三个43kDa单元组成&#xff0c;这些单元在它们的中间结合。大多数SP-D主要含有十二聚体(四个三聚体亚单位)&#xff0c;但也观察到更高的多聚体。每个单元由至少四个离散的结…

格式刷不能跨工作薄使用,VBA自建公式快速获取 单元格背景色RGB值

查看视频效果请点击 文章目录 前言1.数字转字母代码:2.获取单元格背景颜色RGB值代码:前言 格式刷在我们调整Excel工作表、Word文档的格式时经常使用到,它可以帮助我们快速批量调整字体、大小、颜色、背景色等,甚至是表格行高列宽、字间距大小等。但如果在不同的Excel工作薄…

JSP前端怎么学:深入剖析学习路径与技巧

JSP前端怎么学&#xff1a;深入剖析学习路径与技巧 在数字化时代&#xff0c;前端技术作为用户界面的核心&#xff0c;其重要性不言而喻。JSP&#xff08;Java Server Pages&#xff09;作为一种基于Java的Web开发技术&#xff0c;在构建动态Web应用方面有着广泛的应用。那么&…

springmvc揭秘异常处理机制

HandlerExceptionResolver异常处理 HandlerExceptionResolver是专门进行异常处理的&#xff0c;在render之前进行工作&#xff0c;从异常中解析出ModelAndView public interface HandlerExceptionResolver { ModelAndView resolveException( HttpServletRequest re…

解决:写路由文件时引入页面路径没有提示

1、首先安装插件&#xff1a; Path Autocomplete 2、配置settings.json 文件 复制下面代码到settings.json配置文件中&#xff1a; "path-autocomplete.pathMappings": {"": "${folder}/src/","views": "${folder}/src/views/&…