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

氷泠

已于 2022-02-13 20:44:34 修改

阅读量8.2k

点赞数 6

分类专栏： Vue 文章标签：谷歌地图百度地图高德地图腾讯地图

于 2021-01-07 18:54:17 首次发布

本文链接：https://blog.csdn.net/qq_27525611/article/details/112297301

版权

1 概述

项目需求需要引入地图，对于目前最新的Vue3.0，无论是百度/高德/腾讯地图目前还没有适配，只有Vue 2.x版本的：

在这里插入图片描述

目前只有谷歌地图的Vue3.0适配：

在这里插入图片描述

但是没有适配并不代表不能使用，本文的重点就是如何使用这四种地图，不废话了进入正题。

2 谷歌地图

步骤：

获取API Key
安装
使用

2.1 获取`API Key`

戳这里按提示进行：

在这里插入图片描述

首先点击第一个链接创建项目：

在这里插入图片描述

输入项目名字：

在这里插入图片描述

戳这里查看自己的凭据：

在这里插入图片描述

选择创建凭据里面的API密钥：

在这里插入图片描述

将已创建后的密钥复制即可。

在这里插入图片描述

2.2 安装

npm install --save vue3-google-map
# 或
cnpm install --save vue3-google-map
# 或
yarn add vue3-google-map

2.3 使用

在需要引入的组件中添加如下示例代码：

<template>
	<GoogleMap
	api-key="YOUR_GOOGLE_MAPS_API_KEY"
	style="width: 100%; height: 500px"
	:center="center"
	:zoom="15"
	>
		<Marker :options="{ position: center }" />
	</GoogleMap>
</template>

<script>
import {
      GoogleMap, Marker } from 'vue3-google-map'

export default {
     
	components: {
      GoogleMap, Marker }