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 使用
在需要引入的組件中添加如下示例代碼:
<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-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
戳這裏註冊高德開放平臺賬號:
創建:
選擇添加:
選擇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
):