欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用Google地圖的實現(xiàn)示例代碼

 更新時間:2018年12月19日 09:14:08   作者:童話_xxv  
這篇文章主要介紹了vue使用Google地圖的實現(xiàn)示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近用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)文章

  • Vue+ssh框架實現(xiàn)在線聊天

    Vue+ssh框架實現(xiàn)在線聊天

    這篇文章主要為大家詳細介紹了Vue+ssh框架實現(xiàn)在線聊天,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • 關(guān)于vue.js組件數(shù)據(jù)流的問題

    關(guān)于vue.js組件數(shù)據(jù)流的問題

    本篇文章主要介紹了關(guān)于vue.js組件數(shù)據(jù)流的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法

    vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法

    今天小編就為大家分享一篇vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解Vue 單文件組件的三種寫法

    詳解Vue 單文件組件的三種寫法

    這篇文章主要介紹了詳解Vue 單文件組件的三種寫法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • vue實現(xiàn)點擊按鈕下載文件功能

    vue實現(xiàn)點擊按鈕下載文件功能

    這篇文章主要介紹了vue中點擊按鈕下載文件,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-10-10
  • 解決vant的Cascader級聯(lián)選擇組建css樣式錯亂問題

    解決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)建項目的方法

    今天小編就為大家分享一篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項目的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解Vue爬坑之vuex初識

    詳解Vue爬坑之vuex初識

    本篇文章主要介紹了詳解Vue爬坑之vuex初識 ,Vue 的狀態(tài)管理工具 Vuex可以解決大型項目中子組件之間傳遞數(shù)據(jù),有興趣的可以了解下
    2017-06-06
  • 從零到一詳聊創(chuàng)建Vue工程及遇到的常見問題

    從零到一詳聊創(chuàng)建Vue工程及遇到的常見問題

    這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見問題 ,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • vue element實現(xiàn)多個Formt表單同時驗證

    vue element實現(xiàn)多個Formt表單同時驗證

    這篇文章主要介紹了vue element實現(xiàn)多個Formt表單同時驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06

最新評論