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

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 使用

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

并将KEY修改为自己的KEY。

若KEY没问题的话，运行后即可看到地图，笔者这里遇到了一下错误：

提示说是地图API还没有激活，点击提示中的链接进行激活：

启用：

但是这里又报了一个错误：

按照控制台提示的链接激活：

激活后即可看到地图。

3 百度地图

步骤：

• 获取ak
• 安装
• 使用

3.1 获取ak

ak类似谷歌地图中的API KEY，戳这里注册百度地图开发者账号，然后创建一个应用：

注意应用类型需要选择浏览器端，并且需要配置域名限制，若无限制域名需要输入*。

创建后即可看到ak：

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，官方文档只提供了

具体流程为，在Vue应用下的index.html直接引入该JS：

3.3 使用

在需要的组件中创建一个固定宽高的容器：

在mounted()中创建地图：

mounted(){
    var map = new BMap.Map('container')
    var point = new BMap.Point(116.404, 39.915)
    map.centerAndZoom(point, 15)
    map.enableScrollWheelZoom(true)
}

运行效果：

更详细的使用请看官方文档。

4 高德地图

流程：

• 注册账号获取KEY
• 安装
• 使用

4.1 KEY

戳这里注册高德开放平台账号：

创建：

选择添加：

选择Web端(JS API)，同时需要域名限制请按提示进行输入：

创建完成后即可看到KEY。

4.2 安装

高德地图JS API目前有两个版本：v1.4/v2.0，v1.4的地图只能通过

修改为自己的KEY。

5.3 使用

对应组件创建容器：

mounted()中引入：

mounted(){
    var myLatlng = new qq.maps.LatLng(39.90923,116.397428)
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: qq.maps.MapTypeId.ROADMAP
    }
    var map = new qq.maps.Map(document.getElementById("container"), myOptions);
}

示例效果：

6 附录：坐标系转换

国内主要有以下三种坐标系：

• WGS84：一种大地坐标系，目前广泛使用的GPS系统使用的坐标系
• GCJ02：又叫火星坐标系/国测局坐标系，中国国家测绘局制订的地理信息系统坐标系统，是WGS84坐标加密后的坐标系
• BD09：百度坐标系，在GCJ02基础上再次进行加密

而各种地图使用的坐标系如下：

• 谷歌国内地图、高德地图、腾讯地图：GCJ02
• 百度地图：BD09
• 谷歌国外地图、osm地图等：WGS84

当坐标系不一致时，需要进行转换，这里推荐两个坐标系转换开源库（3.1k/1.8k star）：

戳这里或这里使用。