vue中地图(高德、百度)的引入

最新推荐文章于 2025-03-03 15:36:53 发布

Beam007

最新推荐文章于 2025-03-03 15:36:53 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/110135984

版权

本文介绍了如何在Vue项目中引入高德和百度地图，重点在于区分Web端JS API和Web服务API的区别，并提供在webpack配置中声明全局变量的方法，以及地图实例的创建步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引入js包：

index.html：
// 百度地图
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=`申请的秘钥`"></script>
// 高德地图
<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=`申请的秘钥`&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch"></script>

注意：申请高德地图时注意Web端（JS API）和Web服务的差别，我觉得这俩长得挺像的一开始还用错了。
在这里插入图片描述
看一下官方对两者的描述说明：

个人理解Web服务API是http接口调用的，供后台