vue使用Google地圖的實現(xiàn)示例代碼
最近用Vue開發(fā)后臺系統(tǒng)時,有些數(shù)據(jù)需要在地圖上標(biāo)注出來,需要用到地圖功能,因為是國際項目,國內(nèi)的地圖不太適用,所以選用了Google地圖,谷歌地圖API: https://developers.google.cn/maps/documentation/javascript/tutorial 。
一、必須的開發(fā)要求
1.獲取密鑰API Key
首先,要使用Google Maps JavaScript API,必須獲取一個可用的API密鑰,并且必須啟用結(jié)算,具體獲取步驟可百度查詢,在此就不一一敘述了,主要想講的地圖用法。
2.海外服務(wù)器IP
.想要使用谷歌地圖就需要翻墻了,公司購買的是發(fā)條云的賬號,在瀏覽器上下載發(fā)條云安裝,安裝好之后輸入用戶賬號和密碼進行登錄,就可以選擇服務(wù)器進行操作了。
海外模式的網(wǎng)速比較慢,一般開發(fā)谷歌地圖的時候,我才打開。
二、引入谷歌插件
使用npm進行引入:
npm install vue-google-maps
//mian.js中: import 'vue-googlemaps/dist/vue-googlemaps.css' import VueGoogleMaps from 'vue-googlemaps' Vue.use(VueGoogleMaps, { load: { //填入申請的apiKey賬號 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"), { //顯示一個滑動條來控制map的Zoom級別 zoom: 13, //設(shè)置地圖中心點 center: { lat: mapData[0].latitude, lng: mapData[0].longitude }, //為了關(guā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)點) let marker = new google.maps.Marker({ //標(biāo)點的位置 position: { lat: 22.5397965915, lng: 114.0611121534 }, map: this.maps, //標(biāo)點的名稱 title: "中華人民共和國", //標(biāo)點中的文字 label: "SZ", //標(biāo)點的動畫 animation: google.maps.Animation.DROP }); // 創(chuàng)建消息窗口DOM,將內(nèi)容包裝在HTML DIV中,以便設(shè)置InfoWindow的高度和寬度。 let contentString = '<div class="content"><h3>地圖</h3><p>測試數(shù)據(jù)</p></div>'; //地圖的消息窗口:InfoWindow let infowindow = new google.maps.InfoWindow({ content: contentString }); // 點擊標(biāo)點事件 marker.addListener("click", function() { infowindow.open(this.maps, marker); });
示例圖片:
2.結(jié)合項目
//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, //地圖中心點,這里我以第一個數(shù)據(jù)的經(jīng)緯度來設(shè)置中心點 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 }); //多個標(biāo)記點的點擊事件 (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;">機柜狀態(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。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue.js組件數(shù)據(jù)流的問題
本篇文章主要介紹了關(guān)于vue.js組件數(shù)據(jù)流的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法
今天小編就為大家分享一篇vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09解決vant的Cascader級聯(lián)選擇組建css樣式錯亂問題
這篇文章主要介紹了解決vant的Cascader級聯(lián)選擇組建css樣式錯亂問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項目的方法
今天小編就為大家分享一篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項目的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue element實現(xiàn)多個Formt表單同時驗證
這篇文章主要介紹了vue element實現(xiàn)多個Formt表單同時驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06