基于Vue3.0的高德地图api教程003：绘制点并保存到数据库

已于 2025-05-12 09:10:11 修改
阅读量229 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 高德地图API教程 文章标签： vue 高德地图api
于 2025-05-12 06:48:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WwLK123/article/details/147840181

文章目录

5、绘制点功能实现

5.1 创建后端接口

通过express调用postgres数据库

详细的创建步骤参考文章：

https://blog.csdn.net/WwLK123/article/details/145452753

5.2 前端绘制点并保存到数据库

5.2.1 开启点绘制功能

实现代码：

const changeSwitchDrawPoint = () => {
   
   
    switchDrawPoint
了解本专栏 订阅专栏 解锁全文 超级会员免费看
基于Vue3.0的高德地图api教程005：实现绘制线并编辑功能
WwLK123的博客
05-12 639
本文介绍了如何在网页地图上绘制和编辑多段线的功能实现。首先，通过changeSwitchDrawPolyline函数开启或关闭绘制功能，点击地图添加线节点，鼠标移动时显示临时线路径，双击完成绘制并弹出对话框输入线名。绘制完成后，数据通过axios.post保存到数据库。编辑功能允许用户点击已绘制的线进入编辑模式，使用AMap.PolylineEditor插件进行修改，双击完成编辑后通过axios.put更新数据库。整个过程通过代码示例和效果图展示了功能的实现细节。
基于Vue3.0的高德地图api教程004：自定义绘制点的颜色/修改绘制点/删除绘制点
WwLK123的博客
05-12 400
本文介绍了如何在前端和后端实现自定义点的颜色以及修改点信息的功能。首先，通过修改后端接口，支持插入包含颜色信息的点数据。前端使用Vue框架和Element Plus组件库，实现了点信息输入框和颜色选择器，并通过调用后端API将点数据保存到数据库。接着，通过高德地图API在地图上绘制带有自定义颜色的点。此外，还实现了修改点信息的功能，包括定义marker点击事件、使用Pinia进行状态管理，以及通过调用后端API更新点信息并重新渲染地图上的点。整个过程涵盖了前后端的交互、状态管理以及地图API的使用。
在vue中高德地图引入和轨迹的绘制的实现
01-21
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from ‘vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: ‘********************',//自己在高德地图平台上的key值 plugin: [‘AMap.Autocomplete', ‘AMap.PlaceSearch', ‘AMap.Scal
vue3集成高德地图绘制轨迹地图
最新发布
weixin_36430673的博客
06-12 469
vue3 中集成高德地图实现物流轨迹地图
Vue3 引入高德地图 + 添加标记点
Guanchong333的博客
03-15 2196
Vue3 引入高德地图API
vue3实现高德地图多点标注（so easy）
杜永康的博客
06-05 6403
这些问题对你造成一些困扰，我希望本篇博客能给你带来帮助。首先，地图多点标注是个非常简单的问题，你不要烦躁，让自己静下来去跟着我的思路走一遍。
vue使用高德地图，点标记+轨迹
m0_52769924的博客
09-25 1415
【代码】vue使用高德地图，点标记+轨迹。
【vue3/高德地图】实现地图打点/自定义点位图标
Xiang_Gong_Ya_的博客
11-07 2077
/ imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等。// vue3/vite 需要用特定的本地图片引入方式，不可require引入。// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15。'../assets/images/压力表.png'// 根据所设置的大小拉伸或压缩图片。// GeoJSON对象。//设置地图容器id。// Icon的图像。
vue3使用高德地图绘制多边形区域
weixin_44708030的博客
09-29 797
vue3使用高德地图绘制多边形区域。
vue 高德地图绘制覆盖物时使用的一些方法
weixin_46328739的博客
06-15 489
vue 中使用高德地图，绘制marker及聚合 根据经纬度数组计算出一个合适的地图缩放级别，以便同时显示所有的覆盖物。 计算给定经纬度数组的平均值 当用户拖动或缩放地图时，您可能想要重新加载某些地图数据，以便只显示在新地图视窗中可见的数据
Vue.js高德地图实践：AMapUI离线包的高效加载与管理（技术详解）
![Vue.js高德地图实践：AMapUI离线包的高效加载与管理（技术详解）]...高德地图API提供了一系列的地图服务和功能，被广
基于高德地图封装vue3 地图打点组件
qq_64750772的博客
04-12 382
【代码】基于高德地图封装vue3 地图打点组件。
vue3+uniapp中使用高德地图实现撒点效果
浩星
05-21 617
 vue3+uniapp中使用高德地图实现撒点效果
vue 高德地图地图新建、保存、编辑、清除绘制多边形
qq_42619759的博客
01-18 6213
index页面 <template> <div> <el-button @click="openEnclosure">绘制围栏</el-button> <draw-enclosure :show.sync="showDialog" :coordinate-string="temp.electronicFencePosition" @coordinate="enclosure" /> </div> <...
【数据处理】高德地图路径规划数据转存shp以及json转geojson介绍
kowkhing的博客
11-17 1460
本文介绍了如果利用arcpy、geopandas以及geojson库对高德地图路径规划结果进行处理，生成矢量数据
高德卫星地图实现多边形绘制，并保存到浏览器
2401_85377290的博客
12-02 390
我最近在用vue3+element plus做一个管理系统，导入了高德地图，已经实现了绘制多边形。2.首页有一个地图，按钮跳转后进入到另一个页面绘制地图，跳转后的页面地图不显示了。1.通过绘制图形的坐标如何存到浏览器呢，确保刷新后也会有这个图。
记录一次用高德api获取经纬度保存到数据库
qq_44345263的博客
12-13 1265
高德api获取经纬度
【微信小程序】微信小程序集成高德卫星地图完成多边形绘制与截图保存
东小记的博客
05-25 2185
微信小程序集成高德卫星地图完成多边形绘制与截图保存；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文理棵

你的鼓励将是我最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值