Vue3.0中引入地图（谷歌+高德+腾讯+百度）

vivk2017

已于 2022-04-30 10:01:53 修改

阅读量1.1k

点赞数

分类专栏： Vue 文章标签：地图 vue

于 2022-04-14 10:15:21 首次发布

本文链接：https://blog.csdn.net/m0_38109616/article/details/124165327

版权

Vue 专栏收录该内容

39 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue3.0项目中如何集成和使用谷歌、高德、腾讯和百度地图，提供详细步骤及关键代码示例，包括在Vue3应用中引入高德地图API的全流程，帮助开发者实现地图功能。

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

Vue3.0中引入地图（谷歌+高德+腾讯+百度）地址：bbsmax.com/A/8Bz8NDNN5x/
【高德地图API】申请key全流程https://blog.csdn.net/zhang919568/article/details/121992540

vue3+高德地图
前言：
vue3中引入高德地图
高德地图：
官网地址https://lbs.amap.com/
api地址https://lbs.amap.com/api/javascript-api/guide/services/autocomplete/?sug_index=0
实现效果：

具体步骤：
1、官网申请高德的key
2、在public/index.html里面添加

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>
3、新建组件 map.vue
<template>
  <div class="map" id="gd_map_d"></div>
</template>
 
<script&g