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）：