高德卫星地图实现多边形绘制，并保存到浏览器

已于 2024-12-03 09:24:46 修改
阅读量340 收藏
点赞数 7
文章标签： 前端
于 2024-12-02 22:25:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85377290/article/details/144200320
版权

我最近在用vue3+element plus做一个管理系统，导入了高德地图，已经实现了绘制多边形。目前遇到两个问题。

1.通过绘制图形的坐标如何存到浏览器呢，确保刷新后也会有这个图。

2.首页有一个地图，按钮跳转后进入到另一个页面绘制地图，跳转后的页面地图不显示了。是怎么回事呢214a97c3a648445b9ec2784f18a00097.png

求大佬们指点

好像是被图片覆盖了，怎么处理啊大佬们

码小奴才
关注
64.qt quick-qml使用高德地图插件实现V2版本(新增:位置搜索、路径规划、轨迹编辑等)
抵抗时间扭曲，坚持做一件有意义的事
01-12 5264
qt quick-qml高德地图插件(新增:位置搜索、路径规划、轨迹编辑等) Qt地图插件，使用简单方便，不用浏览器内核，运行高效迅速 跨平台支持，（Qt Windows（MinGW, MSVC）\Linux(桌面、嵌入式)\Android\IOS\等) 在线更新瓦片地图下载，并且支持缓存保存离线地图实现.........
Vue前端实现在图片上画线, 并将端点坐标传给后端
hero8011的博客
12-19 1505
Vue前端实现在图片上画线, 并将端点坐标传给后端
高德地图在vue3项目中使用：实现画矢量图、编辑矢量图
一个韩韩韩
04-29 1863
高德地图实现图形操作
【vue引入腾讯地图、多边形绘制、标记点提示、绘制热力图】
zsx1799268625的博客
03-27 1248
vue引入腾讯地图，实现区域框选、建筑提示、热力图
高德地图开发：绘制多边形小工具，支持编辑和获取坐标
近10年前端开发工作经验，为你分享日常经验所得
02-23 3521
官网很多demo是2.0版本的，这里是v1.4.15，不排除语法会有区别。之前是做的一个单页面小工具，如果你需要整合到项目里，注意高德js api的。点击右下角“绘制一个新多边形”按钮开始绘制新图形，正式开发请更换为自己的高德key！
高德地图多边形围栏实例：javaspringmvc+mysql
我的成长之路！
04-24 3101
高德地图多边形围栏实例：javaspringmvc+mysql GitHub：https://github.com/hunhun1122/map-gaode
高德地图卫星图层绘制多边形后截图保存
weixin_34303897的博客
11-22 501
先看看效果吧 首先利用高德给的api在地图上画出一个多边形 生成截图后的效果 (function(fn) { window.cut = fn })( /** * 通过plygon得到一个剪裁后的图片 * @param map 高德的map * @param myCanvas 由于高德地图的卫星图是div拼接的瓦片，剪裁要用canvas，所以用html2ca...
vue2用高德地图实现绘制多边形电子围栏
qq_43234743的博客
09-05 3763
vue2用高德地图实现绘制多边形电子围栏
高德地图-快速上手-图层示例在angular里的实现
web
08-09 848
高德地图 快速上手 示例 地址： https://lbs.amap.com/api/javascript-api/guide/abc/quickstart 高德官方图层： https://lbs.amap.com/api/javascript-api/guide/layers/official-layers 图层 默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层： <div id='map' style='width:1000px; height:600px;ma
【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)
weixin_46346674的博客
01-05 9334
高德地图API实现一个简单基础的WebGIS，功能有图层管理、路径规划、POI搜索、热力图、点图层交互、上下文菜单等。
Ldh.Maps开源代码实现多平台地图绘制与图层整合
- Google卫星图：Google地图提供的卫星图像视图，允许用户查看地球表面的卫星照片。 支持多种地图服务提供者意味着开发者可以根据不同的应用场景和需求来选择最适合的地图服务，增加了项目的灵活性和功能性。 ### ...
地图数据可视化：Vue中vue-amap绘制多边形覆盖区域的最佳实践
本文对Vue框架下地图数据可视化进行了系统介绍，并详细探讨了多边形覆盖区域绘制的理论与实践。首先，本文概述了Vue与地图数据可视化的集成方式，介绍了vue-amap组件及其特点，并解释了地图数据可视化的基础知识。...
vue电子围栏多边形高德
娄小研的博客
04-22 1621
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <style> .
改善WebStorm性能
四荒八极的博客
04-29 1490
默认情况下，WebStorm会在你输入代码时进行分析，并高亮显示当前文件中发现的所有问题。它的主要目标是减少IDE的总体索引时间和CPU使用率，因此请确保在“Settings | Plugins”的“Installed”选项卡上启用了Shared Project Indexes插件。可以转到“Settings | Editor | Inspections”，找到“未使用的全局符号检查（Unused global symbol）”，取消选中。这些插件支持我们大多数用户的应用场景，但你不需要的插件可以禁用。
watch 数组 Vue 3
qq_30049249的博客
05-01 154
发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。
使用vue2 开发一个纯静态的校园二手交易平台-前端项目练习
Json的知识梦工厂
04-27 782
因为最近在学习vue相关的技术，所以就根据学习的前端技术，来写一些纯前端的项目来练习，这篇文章主要是分享一下 我做的这个项目的一些功能，如果最近你也在学习前端，希望这篇文章能帮助到你，大家也可以仿照这个项目，自己尝试着写一些完整的功能，从而提高自己的编程能力。这个项目 使用的技术是vue2 做的。：用户可以在个人中心查看自己的交易记录、发布的商品、参与的圈子、个人信息等，便于管理账户和交易信息。：提供交换物品的功能，用户可以发布自己想交换的物品，并与其他用户进行交换，促进物品的循环利用。
ruoyi-plus Spring Boot + MyBatis 中 BaseEntity 的设计与动态查询实践
最新发布
字节叔叔
05-01 158
通过在BaseEntity中引入和params，我们实现了灵活的动态查询能力，在开发中极大简化了接口参数结构与查询逻辑。同时，也提升了系统的可维护性与扩展性，是开发大型后台系统中常用的技巧之一。如果你正在构建一个基于 Spring Boot + MyBatis 的后台管理系统，不妨考虑将这两个字段纳入你的BaseEntity设计中。
WebXR教学 06 项目4 跳跃小游戏
teacherchen90的博客
04-28 450
【代码】WebXR教学 06 项目4 跳跃小游戏。
第十三节：实战与工程化高频题-TypeScript集成要点
qq_40860137的博客
04-28 829
类型声明：defineProps<{ title: string }>()、defineEmits<(...)>() 类型推断：Composition API自动推导响应式变量类型
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值