1 概述

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

2 谷歌地图

步骤：

获取API Key

安装

使用

2.1 获取API Key

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 },

setup() {

const center = { lat: 40.689247, lng: -74.044502 }

return { center }

},

})</script>

并将KEY修改为自己的KEY。

若KEY没问题的话，运行后即可看到地图

3.2 安装

使用Vue2.x的可以从npm/cnpm安装：

vue-baidu-map-v3

vue-baidu-map

coalbr-vue-baidu-map

具体查看文档即可。

百度地图目前有4套JS API：

JavaScript API GL

JavaScript API v2.0

JavaScript API v3.0

JavaScript API Lite

这里以v3.0的API进行操作，对于这套API，官方文档只提供了<script>引入的方式，因此在Vue3.0中需要手动引入JS：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>