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

1 概述 项目需求需要引入地图，对于目前最新的Vue3.0，无论是百度/高德/腾讯地图目前还没有适配，只有Vue 2.x版本的 步骤： 获取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>