如何在ES6中使用Vue.js中的谷歌地圖

我想在ES6中的Vue.js中使用谷歌地圖和jquery。如何在ES6中使用Vue.js中的谷歌地圖

我不希望它是一個組件或任何像vue谷歌地圖。我只想導入谷歌地圖，並使用像我一直使用它。

我得到了jquery這樣工作。

import jQuery from 'jquery' 
    var jq = window.Jquery = jQuery

現在我想對谷歌地圖做同樣的事情，以便我可以訪問'谷歌'變量。並在掛載（）方法中使用它。像這樣...

export default { 
     mounted() { 
      var map = google.maps///etc 
     } 
    }

我似乎無法進口它我試試。如果我只是將腳本包含在index.html頁面中，那麼即使我將它作爲全局對象也不可用。因爲它創建後Vue.js

我已經嘗試vue谷歌地圖，但我的用例是非常具體的，我需要很多舊代碼我已經寫了，所以我只需要簡單的舊谷歌地圖不是AS VUE組件。

我想你可以說，我希望我的應用程序的這部分，根本不受Vue控制。安裝後，只是普通的老Jquery。

請幫忙！

來源

2017-04-06 KyleK

爲什麼downvote？解釋你自己downvoter lol – KyleK

爲什麼不做以下幾點？

<div> 
<img class="google-map" :src="googleUrl()"> 
</div> 

methods: { 
     googleUrl() { 
     return 'https://maps.googleapis.com/maps/api/staticmap?zoom=16&scale=2&markers=color:blue|' + this.fullAddress() + '&size=250x200&sensor=false' 
     }, 
     fullAddress() { 
     return this.streetname + ' ' + this.housenumber + ',' + this.zipcode + ' ' + this.city 
}

來源

2017-04-06 14:22:59

因爲我需要地圖完整的交互性。街景，Infowindows，滾動，縮放。基本上我的整個應用程序都集中在一張地圖上。 – KyleK

是的，你是對的。它實際上不是一個Vue問題。這是一個JavaScript模塊問題。

由於谷歌地圖是用IIFE模式編寫的，所以不能直接導入它。你最好把它翻譯成UMD或commonjs模式。

如果你不確定該怎麼做。也許你可以看看這個。 google-maps

你可以寫這樣的模塊，例如，我的 - 谷歌 - map.js

import 'https://maps.googleapis.com/maps/api/js' 
export default window.google

然後在VUE文件

import google from 'my-google-map.js' 
console.log(google)

來源

2017-04-06 14:35:00

我試過谷歌地圖模塊。我剛剛得到一個錯誤，說。當嘗試啓動地圖時，this.setValues不是函數。它加載正常，因爲我可以控制檯記錄它就好了。但是當我啓動地圖時，出現錯誤。所以也許它的老，或不再被維護。你會認爲這將是一個很容易找到的模塊，許多人已經複製。但我猜不是？ – KyleK

是的，我同意that.So我建議你不要只使用該模塊..但因爲我沒有使用谷歌地圖。我無法給出一些很好的解決方案。但是，我認爲它更像是一個umd，iife等問題。也許你可以自己包裝。哦，我有一個好主意。我編輯anwser。 –

如何在ES6中使用Vue.js中的谷歌地圖

回答

相關問題