最近用Vue開發(fā)后臺(tái)系統(tǒng)時(shí)，有些數(shù)據(jù)需要在地圖上標(biāo)注出來敌土，需要用到地圖功能疫铜，因?yàn)槭菄H項(xiàng)目茂浮，國內(nèi)的地圖不太適用，所以選用了Google地圖壳咕，谷歌地圖API：https://developers.google.cn/maps/documentation/javascript/tutorial席揽。
一、必須的開發(fā)要求
1.獲取密鑰API Key
首先谓厘，要使用Google Maps JavaScript API幌羞，必須獲取一個(gè)可用的API密鑰，并且必須啟用結(jié)算竟稳，具體獲取步驟可百度查詢属桦，在此就不一一敘述了，主要想講的地圖用法他爸。
2.海外服務(wù)器IP
.想要使用谷歌地圖就需要翻墻了聂宾，公司購買的是發(fā)條云的賬號(hào)，在瀏覽器上下載發(fā)條云安裝诊笤，安裝好之后輸入用戶賬號(hào)和密碼進(jìn)行登錄亏吝，就可以選擇服務(wù)器進(jìn)行操作了。
fatiaoyun.jpg
海外模式的網(wǎng)速比較慢盏混，一般開發(fā)谷歌地圖的時(shí)候蔚鸥，我才打開。
二许赃、安裝谷歌插件
使用npm進(jìn)行安裝：
npm install vue-google-maps
//mian.js中：
import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'
Vue.use(VueGoogleMaps, {
load: {
//填入申請(qǐng)的apiKey賬號(hào)
apiKey: '',
libraries: ['places'],
useBetaRenderer: false,
},
})
三止喷、使用谷歌插件
1.使用方法
//創(chuàng)建dom
<div id="allmap" ref="allmap"></div>
//創(chuàng)建谷歌地圖
this.maps = new google.maps.Map(document.getElementById("allmap"), {
//顯示一個(gè)滑動(dòng)條來控制map的Zoom級(jí)別
zoom: 13,
//設(shè)置地圖中心點(diǎn)
center: { lat: mapData[0].latitude, lng: mapData[0].longitude },
//為了關(guān)閉默認(rèn)控件集,設(shè)置地圖的disableDefaultUI的屬性為true
disableDefaultUI: true,
// 通過單擊縮放控件來縮放地圖
gestureHandling: 'cooperative',
// 刪除地圖上的“ 縮放”控件按鈕。
zoomControl: false,
// 控制地圖的類型 roadmap 地圖 terrain 地圖地形
satellite 衛(wèi)星圖像 hybrid 衛(wèi)星圖像+地名
mapTypeId: 'satellite',
//語言可選值：en混聊，zh_en, zh_cn
language: zh_en
// 添加標(biāo)記 (紅色的標(biāo)點(diǎn))
let marker = new google.maps.Marker({
//標(biāo)點(diǎn)的位置
position: { lat: 22.5397965915, lng: 114.0611121534 },
map: this.maps,
//標(biāo)點(diǎn)的名稱
title: "中華人民共和國",
//標(biāo)點(diǎn)中的文字
label: "SZ",
//標(biāo)點(diǎn)的動(dòng)畫
animation: google.maps.Animation.DROP
});
// 創(chuàng)建消息窗口DOM弹谁，將內(nèi)容包裝在HTML DIV中，以便設(shè)置InfoWindow的高度和寬度。
let contentString =
'<div class="content"><h3>地圖</h3><p>測(cè)試數(shù)據(jù)</p></div>';
//地圖的消息窗口：InfoWindow
let infowindow = new google.maps.InfoWindow({
content: contentString
});
// 點(diǎn)擊標(biāo)點(diǎn)事件
marker.addListener("click", function() {
infowindow.open(this.maps, marker);
});
GoogleMap1.jpg
2.結(jié)合項(xiàng)目
//mapPAge.vue
<template>
<div class="container">
<div id="allmap" ref="allmap"></div>
</div>
</template>
<script>
export default {
mounted(){
//在mounted中執(zhí)行地圖方法预愤，mapData為要展示的數(shù)據(jù)
this.initMap(mapData);
}
methods:{
initMap(mapData) {
let that = this;
// 創(chuàng)建google地圖
this.maps = new google.maps.Map(document.getElementById("allmap"), {
zoom: 13,
//地圖中心點(diǎn)沟于，這里我以第一個(gè)數(shù)據(jù)的經(jīng)緯度來設(shè)置中心點(diǎn)
center: { lat: mapData[0].latitude, lng: mapData[0].longitude },
disableDefaultUI: false,
zoomControl: false
});
// 設(shè)置滿足條件的自定義標(biāo)記圖標(biāo)
let imageblue = "@/img/map_blue.png";
let imagered = "@/img/map_red.png";
let imagegray = "@/img/map_gray.png";
let infoWindow = new google.maps.InfoWindow();
// 循環(huán)渲染數(shù)據(jù)
mapData.map(currData=>{
// 判斷當(dāng)前圖片
let currImg = "";
if (currData.line == 0) {
currImg = imagegray;
} else {
if (currData.available >= 4) {
currImg = imageblue;
} else {
currImg = imagered;
}
}
let marker = new google.maps.Marker({
position: { lat: currData.latitude, lng: currData.longitude },
map: this.maps,
title: currData.name,
// 此處的icon為標(biāo)記的自定義圖標(biāo)
icon: currImg,
animation: google.maps.Animation.DROP
});
//多個(gè)標(biāo)記點(diǎn)的點(diǎn)擊事件
(function(marker, currData) {
google.maps.event.addListener(marker, "click", function(e) {
let currLine =
currData.line == 1? '在線': '離線';
//設(shè)置消息窗口的統(tǒng)一內(nèi)容
infoWindow.setContent(
'<div class="content"><h3 style="margin-bottom:5px;font-size:20px;">' +
currData.name +
'</h3><p style="margin-bottom:5px;font-size:16px;">' +
currData.address +
'</p></h3><p style="display: flex;align-items:center;margin-bottom:5px;"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#4ECC77;"></span><span style="margin-left:5px;color:#4ECC77;">可用電池 ' +
+currData.available +
'<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#FF485C;margin-left:25px;"></span><span style="margin-left:5px;color:#FF485C;">空倉 ' +
+currData.empty +
'</span></p><p style="color:#333;margin-top:5px;">機(jī)柜狀態(tài)：<span style="color:#000;">' +currLine+
'</span></p><p style="color:#333;margin-top:5px;">地理位置：<span style="color:#000;">lat：' +
currData.latitude +
"；log：" +
currData.longitude +
"</span></p></div>"
);
//調(diào)用 infoWindow.open
infoWindow.open(this.maps, marker);
});
})(marker, currData);
}）
}
}
}
GoogleNap.png
以上使用的是谷歌地圖的基本內(nèi)容植康，有興趣的小伙伴兒可以查看谷歌官方文檔旷太，查看更多內(nèi)容，使用更多功能O(∩_∩)O销睁。
ye.jpg
