vue使用Google地圖的實(shí)現(xiàn)示例代碼
最近用Vue開(kāi)發(fā)后臺(tái)系統(tǒng)時(shí),有些數(shù)據(jù)需要在地圖上標(biāo)注出來(lái),需要用到地圖功能,因?yàn)槭菄?guó)際項(xiàng)目,國(guó)內(nèi)的地圖不太適用,所以選用了Google地圖,谷歌地圖API: https://developers.google.cn/maps/documentation/javascript/tutorial 。
一、必須的開(kāi)發(fā)要求
1.獲取密鑰API Key
首先,要使用Google Maps JavaScript API,必須獲取一個(gè)可用的API密鑰,并且必須啟用結(jié)算,具體獲取步驟可百度查詢(xún),在此就不一一敘述了,主要想講的地圖用法。
2.海外服務(wù)器IP
.想要使用谷歌地圖就需要翻墻了,公司購(gòu)買(mǎi)的是發(fā)條云的賬號(hào),在瀏覽器上下載發(fā)條云安裝,安裝好之后輸入用戶賬號(hào)和密碼進(jìn)行登錄,就可以選擇服務(wù)器進(jìn)行操作了。
海外模式的網(wǎng)速比較慢,一般開(kāi)發(fā)谷歌地圖的時(shí)候,我才打開(kāi)。
二、引入谷歌插件
使用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)條來(lái)控制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, // 通過(guò)單擊縮放控件來(lái)縮放地圖 gestureHandling: 'cooperative', // 刪除地圖上的“ 縮放”控件按鈕。 zoomControl: false, // 控制地圖的類(lèi)型 roadmap 地圖 terrain 地圖地形 satellite 衛(wèi)星圖像 hybrid 衛(wèi)星圖像+地名 mapTypeId: 'satellite', //語(yǔ)言可選值: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)的名稱(chēng) title: "中華人民共和國(guó)", //標(biāo)點(diǎn)中的文字 label: "SZ", //標(biāo)點(diǎn)的動(dòng)畫(huà) 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); });
示例圖片:
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)緯度來(lái)設(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;">空倉(cāng) ' + +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); }) } } }
示例圖片:
以上使用的是谷歌地圖的基本內(nèi)容,有興趣的小伙伴兒可以查看谷歌官方文檔,查看更多內(nèi)容,使用更多功能O(∩_∩)O。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue.js組件數(shù)據(jù)流的問(wèn)題
本篇文章主要介紹了關(guān)于vue.js組件數(shù)據(jù)流的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07vue.js中proxyTable 轉(zhuǎn)發(fā)請(qǐng)求的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue.js中proxyTable 轉(zhuǎn)發(fā)請(qǐng)求的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue實(shí)現(xiàn)點(diǎn)擊按鈕下載文件功能
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10解決vant的Cascader級(jí)聯(lián)選擇組建css樣式錯(cuò)亂問(wèn)題
這篇文章主要介紹了解決vant的Cascader級(jí)聯(lián)選擇組建css樣式錯(cuò)亂問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法
今天小編就為大家分享一篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09從零到一詳聊創(chuàng)建Vue工程及遇到的常見(jiàn)問(wèn)題
這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見(jiàn)問(wèn)題 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue element實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證
這篇文章主要介紹了vue element實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06