1 概述
项目需求须要引入地图，对于目前最新的Vue3.0，不管是百度/高德/腾讯地图目前尚未适配，只有Vue 2.x版本的：javascript
目前只有谷歌地图的Vue3.0适配：php
可是没有适配并不表明不能使用，本文的重点就是如何使用这四种地图，不废话了进入正题。html
2 谷歌地图
步骤：vue
- 获取
API Key - 安装
- 使用
2.1 获取API Key
戳这里按提示进行：java
首先点击第一个连接建立项目：git
输入项目名字：github
戳这里查看本身的凭据：npm
选择建立凭据里面的API密钥：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 },
setup() {
const center = { lat: 40.689247, lng: -74.044502 }
return { center }
},
})
</script>
并将KEY修改成本身的KEY。
若KEY没问题的话，运行后便可看到地图，笔者这里遇到了一下错误：
提示说是地图API尚未激活，点击提示中的连接进行激活：
启用：
可是这里又报了一个错误：
按照控制台提示的连接激活：
激活后便可看到地图。
3 百度地图
步骤：
- 获取
ak - 安装
- 使用
3.1 获取ak
ak相似谷歌地图中的API KEY，戳这里注册百度地图开发者帐号，而后建立一个应用：
注意应用类型须要选择浏览器端，而且须要配置域名限制，若无限制域名须要输入*。
建立后便可看到ak：
3.2 安装
使用Vue2.x的能够从npm/cnpm安装：
vue-baidu-map-v3vue-baidu-mapcoalbr-vue-baidu-map
具体查看文档便可。
百度地图目前有4套JS API：
JavaScript API GLJavaScript API v2.0JavaScript API v3.0JavaScript 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>
具体流程为，在Vue应用下的index.html直接引入该JS：
3.3 使用
在须要的组件中建立一个固定宽高的容器：
<div id="container" style="width: 800px;height: 800px"></div>
在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的地图只能经过<script>引入，而在v2.0中，高德官方额外提供了JSAPI Loader，能够经过该JSAPI Loader去加载地图，这里以v2.0版本进行操做。
JSAPI Loader使用npm/cnpm安装：
npm i @amap/amap-jsapi-loader --save # 或 cnpm i @amap/amap-jsapi-loader --save
另外一种方式是传统的<script>，但不建议，须要的能够看官方文档。
4.3 使用
在须要的组件中定义一个容器，肯定高宽：
<div id="container" style="height: 800px;width: 800px;"></div>
下一步就是import：
import AMapLoader from '@amap/amap-jsapi-loader';
并在setup()/mounted()中加载：
setup(){
AMapLoader.load({
"key": "", // 申请好的Web端开发者Key，首次调用 load 时必填
"version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
"plugins": [], // 须要使用的的插件列表，如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI，缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins":[], // 须要加载的 AMapUI ui插件
},
"Loca":{ // 是否加载 Loca， 缺省不加载
"version": '1.3.2' // Loca 版本，缺省 1.3.2
},
}).then((AMap)=>{
var map = new AMap.Map('container', {
zoom:11, //级别
center: [116.397428, 39.90923], //中心点坐标
viewMode:'3D' //使用3D视图
});
}).catch(e => {
console.log(e);
})
},
修改成本身的KEY，示例效果：
更详细使用请查看官方文档。
5 腾讯地图
步骤相似：
- 注册帐号
- 安装
- 使用
5.1 注册帐号
戳这里注册帐号：
建立KEY：
5.2 安装
腾讯地图目前一样有两个版本：v1/v2，这里以v2示例。
腾讯地图与百度地图相似，只提供了<script>去引入地图，所以操做方式与百度地图相似，在index.html中引入：
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=KEY"></script>
修改成本身的KEY。
5.3 使用
对应组件建立容器：
<div id="container" style="width: 800px;height: 800px"></div>
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）：