vue使用Google地圖的實(shí)現(xià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,
 },
})

//創(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,
   // 控制地圖的類型 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)的名稱
    title: "中華人民共和國(guó)",
   //標(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"><h4>地圖</h4><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);
   });

//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"><h4 >' +
        currData.name +
        '</h4><p >' +
        currData.address +
        '</p></h4><p ><span ></span><span >可用電池 ' +
        +currData.available +
        '<span ></span><span >空倉(cāng) ' +
        +currData.empty +
        '</span></p><p >機(jī)柜狀態(tài)：<span >' +currLine+
        '</span></p><p >地理位置：<span >lat：' +
        currData.latitude +
        "；log：" +
        currData.longitude +
        "</span></p></div>"
      );
      //調(diào)用 infoWindow.open
      infoWindow.open(this.maps, marker);
     });
    })(marker, currData);
     }）
    }
  }
 }