1 概述
項目需求需要引入地圖，對于目前最新的
Vue3.0
，無論是百度/高德/騰訊地圖目前還沒有适配，隻有
Vue 2.x
版本的：
目前隻有谷歌地圖的
Vue3.0
适配：
但是沒有适配并不代表不能使用，本文的重點就是如何使用這四種地圖，不廢話了進入正題。
2 谷歌地圖
步驟：
- 擷取
API Key
- 安裝
- 使用
2.1 擷取 API Key
API Key
戳這裡按提示進行：
首先點選第一個連結建立項目：
輸入項目名字：
戳這裡檢視自己的憑據：
選擇建立憑據裡面的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
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
，官方文檔隻提供了
<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
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
）：
戳這裡或這裡使用。
如果覺得文章好看，歡迎點贊。
同時歡迎關注微信公衆号：氷泠之路。