集成谷歌地圖在vue.js

我一直想在我的vue.js項目初始化一個谷歌地圖，而包括腳本：集成谷歌地圖在vue.js

<script src="https://maps.googleapis.com/maps/api/js?key="MY_API_KEY"&callback=initMap" async defer></script>

的問題是，我.vue文件看起來像：

<template> 
    ... 
</template> 

<script> 
    ... 
</script>

我不能包含一個以上的腳本標籤在我的VUE文件，我可以顯示在地圖路過的index.html的一段時間，但我真的不希望把JS上的index.html，+我無法將腳本回調指向vue方法。

你們對如何使用.vue文件顯示該地圖有一些想法嗎？我確實使用了vue2-google-maps，但我想使用原始的Google地圖。

我有一個小提琴這是做什麼OK：https://jsfiddle.net/okubdoqa/沒有腳本標記使用回調，但它不工作對我來說...謝謝

來源

2017-06-19 Loïc Monard

https://www.npmjs.com/package/google-maps –

這是一個有點挑剔得到這個工作，而無需使用庫，並且可能有更乾淨的方法，但是如果您想啓動並運行，您可以簡單地導入庫並在組件中使用它。

首先，請勿在<script>標記中使用defer & async選項。它裝載在index.html：

<script src="https://maps.googleapis.com/maps/api/js?key=yourKey"></script>

然後在你的組件，你可以訪問全球google並將它傳遞一個元素一旦組件安裝。例如使用從Vuejs CLI設置：

<template> 
    <div class="hello"> 
    <h1>{{ msg }}</h1> 

    <div id="myMap"></div> 
    </div> 
</template> 

<script> 
export default { 
    name: 'hello', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    }}, 
    mounted: function() { 
     console.log("map: ", google.maps) 
      this.map = new google.maps.Map(document.getElementById('myMap'), { 
      center: {lat:61.180059, lng: -149.822075}, 
      scrollwheel: false, 
      zoom: 4 
      }) 
    } 

} 
</script> 
<style scoped> 
    #myMap { 
    height:300px; 
    width: 100%; 
    } 
</style>

來源

2017-06-19 17:29:29

感謝您的重播，遺憾的是我有一個錯誤說「錯誤在安裝掛鉤：」的ReferenceError：谷歌是不是定義「如果腳本甚至沒有... –

好的，從不知道我只是把腳本放在索引的頭標記而不是正文，它工作 –

這個引用錯誤來自ESLint。將google添加爲全局變量https ：//stackoverflow.com/a/30400159 –

我建議使用npm google-maps而不是添加index.html中的腳本。您可能不需要在每個頁面中調用google-maps API，並且我認爲最好是正確使用Webpack。您可以使用npm install google-maps

import GoogleMapsLoader from 'google-maps' 

mounted: function() { 
    GoogleMapsLoader.load(function(google) { 
    let map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: position 
    }) 
    }) 
}

來源

2017-09-04 05:15:15

此包是否提供相同的服務？ https://github.com/googlemaps/google-maps-services-js tnks – anasmorahhib

集成谷歌地圖在vue.js

回答

相關問題