vue结合vue-amap调用高德地图行政区划分并添加标记点

小灰灰 2023-03-05 03:18 64阅读 0赞

\*\*1、到高德地图开放平台申请key  
2、npm安装vue-amap  
![在这里插入图片描述][20200804113729355.png]

3、在main.js中引入并初始化\*\*  
![引入][20200804113900393.png]  
![在这里插入图片描述][20200805200941279.png]

4、页面引用amap  
![在这里插入图片描述][20200804133530399.png]  
5.添加默认数据  
![在这里插入图片描述][20200804133601783.png]  
6.获取函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70]  
7.调用  
![在这里插入图片描述][20200804133630212.png]  
8.效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 1]  
9.开始准备添加标记点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 2]  
10.添加标记点的函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 3]  
13.自定义弹出框的样式，我是仿照高德地图的demo做的，可以自己根据需求改动！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 4]  
14.接下来就是在规定行政区中添加标记点的结果图了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 5]  
[传送门，图片自己随便找两张替换一下][Link 1]

如果还是有问题的话就在index.html中CDN一下，替换成自己的key

[20200804113729355.png]: /images/20230208/b11f40e303bf411ab28838d58bbe1240.png
[20200804113900393.png]: /images/20230208/e1dfbb4e67e941acae4c7553a69e86d4.png
[20200805200941279.png]: /images/20230208/89cbcd17f8c04cf9a59842befafd2de2.png
[20200804133530399.png]: /images/20230208/16d69dba37f14e98b7c6fa032428b5a4.png
[20200804133601783.png]: /images/20230208/4728f41d9a9646d9904189c84d8e4f1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70]: /images/20230208/01604366b9514a6798dd83dc70d1ded7.png
[20200804133630212.png]: /images/20230208/2b083808bd8c4f5a999688357629681f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 1]: /images/20230208/278626ce040b447696c6ca49eced5d95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 2]: /images/20230208/9420793c9621482091ea1a031d6ba6d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 3]: /images/20230208/fef7c34aa2c145f69f94fd4bb1b6fa44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 4]: /images/20230208/ca93378c95c848edacbc3b707b374dfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 5]: /images/20230208/929eac002a4347708b427f11a08227c3.png
[Link 1]: https://github.com/chen1366142688/vue-amap-polygon.git