在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制

1,先去高德地图开放平台申请账号注册流程不再赘述;

2,在我的应用中创建key,选择web端Js点击提交生成;

3,生成后可以看到自己的key

4,进入项目中使用npm下载依赖

npm i @amap/amap-jsapi-loader --save

5,下载完成后页面组件中引入

import AMapLoader from '@amap/amap-jsapi-loader';

6,引入完成后初始化地图

  //这里是数据import { HAILINGdata, JIANGYANdata, GAOXINdata } from './map.js';const map = ref<any>(null);const mapZoom = ref<number>(10.5);//初始化地图AMapLoader.load({key: '***', //填入你申请的keyversion: '1.4.15', //高德版本 可以不填plugins: [ //需要的地图插件"AMap.ToolBar","AMap.Driving","AMap.PolygonEditor","AMap.PlaceSearch",]}).then(v => {//对地图进行赋值 “container”为div盒子的id//<div class="map" id="container"></div>map.value = new v.Map("container", {resizeEnable: true, //调整大小启用center: [114.573471, 25.128443], //地图中心点坐标zoom: 1 //缩放(可能失效)});//因为我这里是需要三个区切换显示所以我做了判断 如果只有一个可以直接赋值;var path1 = active.value == 0 ? HAILINGdata : (active.value == 1 ? JIANGYANdata : GAOXINdata);//重新创建边界范围对象var polygon = new v.Polygon({path: path1, //边界的所有坐标fillColor: '#0070EF', //覆盖颜色strokeOpacity: 1, //边界透明度fillOpacity: 0.2, //覆盖颜色后的透明度strokeColor: '#0070EF', //边界线条颜色strokeWeight: 1, //边界线条宽度strokeStyle: 'dashed', //边界线条strokeDasharray: [5, 5], //阵列});map.value.add([polygon]); //将范围对象add到地图中map.value.setFitView(); //重新绘制map.value.setZoom(mapZoom.value); //注意我这里因为上面zoom缩放失效我这里重新进行set 可以将值写死 也可以写成动态的根据自己项目情况})

7,边界数据怎么下载(也就是我这里的 HAILINGdata / JIANGYANdata / GAOXINdata)

可以去阿里的dataV中下载也可以找github上的边界范围下载excel导入到项目中;

官方dome中只有上海和苏州的可以去看看数据格式到时候修改一样即可;

官方demo数据

我自己在github上找的也可以自己找

github地址

如果你觉得不错希望一键三连有什么问题评论或者私信看到后我会及时回复的哦~感谢

在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制相关推荐

python爬取地图上的经纬度_使用高德开放平台api批量爬取所需经纬度及位置信息(平台教程和python多进程、多线程代码详解)...
2019.3.20更新(将代码升级为非阻塞式多进程,效率极大提升) 2019.6.28更新 (将代码模块化,复用性更强,使用更高效的线程池进行爬取) 之前写爬虫对链家某地区全部二手房信息进行了获取并存 ...
震惊——JS中百度地图开放平台API尽然是这样使用
百度地图js--API使用基本使用引用百度API资源   <script type="text/jav ...
接入高德开放平台实现地址转换为经纬度坐标
高德地图API 1 地址转为经纬度后台人员填写完房源详情地址后,由此地址转为,电子地图中的经纬度.从而方便日后前台在电子地图中的标识显示. 高德地图开放平台:https://lbs.amap.co ...
高德开放平台发布“GAIA计划”，打造“组件式”解决方案
今日,高德开放平台在北京举办2018战略说明会,正式对外发布了"GAIA计划",宣布将为合作伙伴提供针对包括网约车.海外.货运.游戏等行业"组件式"的垂类解决方 ...
python高德查询县_Python和高德开放平台——地名地址空间化及采集POI信息
上一篇我们介绍微博开放平台时说道了通过高德开放平台获取地名地址的坐标,今天我们来说一说怎么使用高德开放平台查询相关关键词的地址坐标,或者采集学校.医院.餐厅.公园.企业等POI的信息. 高德开放平台h ...
高德开放平台 - 学习/实践
1.应用场景借助高德开放平台进行项目的开发, 完成业务需要, 如地理编码. 2.学习/操作 2.1 介绍暂见: https://lbs.amap.com/dev/index //高德开放平台开 ...
高德开放平台实现区域地图+云图标记
在项目中需要使用类似GIS效果的地图,考虑到高德开放平台关于云图的便利性,便利用官网和网上的例子,进行了初步实现. 1.带3D效果: 2.代码: <!doctype html> <h ...
mysql高德地图设计_基于高德开放平台Map Lab的数据可视化
在Map Lab上创建可视化项目,首先需要添加数据.添加数据有4种方式,分别是: 上传CSV文件添加数据上传Excel文件添加数据连接在线数据库添加数据提供在线数据API添加数据一.数据上传说 ...
HTML 文件中引入高德地图
准备工作: 1.在高德开放平台,注册开发者账号: 2.登陆之后,进入"应用管理",点击"我的应用",选择右上角"创建新应用": 3.为应用添 ...

在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制

在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制

在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制相关推荐

最新文章

热门文章