vue使用Google地圖的實現示例代碼

2019-11-19 12:19:51

字體：大中小

來源：轉載

供稿：網友

最近用Vue開發后臺系統時，有些數據需要在地圖上標注出來，需要用到地圖功能，因為是國際項目，國內的地圖不太適用，所以選用了Google地圖，谷歌地圖API： https://developers.google.cn/maps/documentation/javascript/tutorial 。

一、必須的開發要求

1.獲取密鑰API Key

首先，要使用Google Maps JavaScript API，必須獲取一個可用的API密鑰，并且必須啟用結算，具體獲取步驟可百度查詢，在此就不一一敘述了，主要想講的地圖用法。

2.海外服務器IP

.想要使用谷歌地圖就需要翻墻了，公司購買的是發條云的賬號，在瀏覽器上下載發條云安裝，安裝好之后輸入用戶賬號和密碼進行登錄，就可以選擇服務器進行操作了。

海外模式的網速比較慢，一般開發谷歌地圖的時候，我才打開。

二、引入谷歌插件

使用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.使用方法

//創建dom<div id="allmap" ref="allmap"></div>  //創建谷歌地圖   this.maps = new google.maps.Map(document.getElementById("allmap"), {    //顯示一個滑動條來控制map的Zoom級別    zoom: 13,    //設置地圖中心點    center: { lat: mapData[0].latitude, lng: mapData[0].longitude },    //為了關閉默認控件集,設置地圖的disableDefaultUI的屬性為true    disableDefaultUI: true,   // 通過單擊縮放控件來縮放地圖    gestureHandling: 'cooperative',     // 刪除地圖上的“ 縮放”控件按鈕。    zoomControl: false,   // 控制地圖的類型 roadmap 地圖 terrain 地圖地形    satellite 衛星圖像 hybrid 衛星圖像+地名    mapTypeId: 'satellite',          //語言可選值：en，zh_en, zh_cn    language: zh_en       // 添加標記 (紅色的標點)   let marker = new google.maps.Marker({    //標點的位置    position: { lat: 22.5397965915, lng: 114.0611121534 },    map: this.maps,   //標點的名稱    title: "中華人民共和國",   //標點中的文字    label: "SZ",   //標點的動畫    animation: google.maps.Animation.DROP    });    // 創建消息窗口DOM，將內容包裝在HTML DIV中，以便設置InfoWindow的高度和寬度。   let contentString =    '<div class="content"><h3>地圖</h3><p>測試數據</p></div>';   //地圖的消息窗口：InfoWindow   let infowindow = new google.maps.InfoWindow({    content: contentString   });   // 點擊標點事件   marker.addListener("click", function() {    infowindow.open(this.maps, marker);   });

示例圖片：

2.結合項目

//mapPAge.vue<template> <div class="container">  <div id="allmap" ref="allmap"></div> </div></template><script>export default {  mounted(){  //在mounted中執行地圖方法，mapData為要展示的數據  this.initMap(mapData);}  methods:{  initMap(mapData) {   let that = this;   // 創建google地圖    this.maps = new google.maps.Map(document.getElementById("allmap"), {    zoom: 13,    //地圖中心點，這里我以第一個數據的經緯度來設置中心點    center: { lat: mapData[0].latitude, lng: mapData[0].longitude },    disableDefaultUI: false,    zoomControl: false      });     // 設置滿足條件的自定義標記圖標   let imageblue = "@/img/map_blue.png";   let imagered = "@/img/map_red.png";   let imagegray = "@/img/map_gray.png";   let infoWindow = new google.maps.InfoWindow();   // 循環渲染數據   mapData.map(currData=>{    // 判斷當前圖片    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為標記的自定義圖標     icon: currImg,     animation: google.maps.Animation.DROP    });         //多個標記點的點擊事件    (function(marker, currData) {     google.maps.event.addListener(marker, "click", function(e) {      let currLine =       currData.line == 1? '在線': '離線';      //設置消息窗口的統一內容      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;">機柜狀態：<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>"      );      //調用 infoWindow.open      infoWindow.open(this.maps, marker);     });    })(marker, currData);     }）    }  } }

示例圖片：