Question

我一直试图在我的vue.js项目中初始化Google地图，同时包含脚本：

<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上，+我可以＆＃39; t将脚本回调指向vue方法。

你们对如何使用.vue文件显示该地图有什么想法吗？我确实使用了vue2-google-maps，但我想使用原始的谷歌地图。

我有一个小提琴正在做一些事情：https://jsfiddle.net/okubdoqa/没有在脚本标签中使用回调，但它对我不起作用...谢谢

Answer 1

我建议使用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
    })
  })
}

Answer 2

在不使用库的情况下让它工作有点挑剔，并且可能有更简洁的方法，但如果你想要启动并运行，你只需导入库并在组件中使用它。

首先，不要使用defer＆amp; async代码中的<script>个选项。将其加载到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>

Answer 3

我正在寻找另一个问题并找到了这个问题，还有另一种方法可以实现这一目标，而无需在index.html中添加它。

我遇到了类似的问题，我不得不为不同的环境使用两个Google API密钥，因此将其硬编码到index.html并不是一个好主意，如果有帮助的话，我会这样做 -

<强> main.js

export const loadedGoogleMapsAPI = new Promise( (resolve,reject) => {

      window['GoogleMapsInit'] = resolve;

      let GMap = document.createElement('script');

      GMap.setAttribute('src',
     `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_API_KEY}&callback=GoogleMapsInit&region=IN`);

      document.body.appendChild(GMap); 
});

<强> MapElem.vue

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

<script>
   import {loadedGoogleMapsAPI} from '@/main'

   export default {
     name: 'MapEl',
     mounted(){  
       loadedGoogleMapsAPI.then(()=>{
         this.initMap()
       });
     },
    methods:{
     initMap(){
        console.log(google.maps); //You can now access google maps object here
        new google.maps.Map(document.getElementById('map'), {
          // You configuration goes here
        })
     }
    }
</script>

这非常简单，你在main.js中写了一个Promise，它将解析为由Google脚本（我们动态附加到正文）启动的回调。一旦Promise得到解决，您就可以访问组件中的地图对象。

Answer 4

如果要使用异步加载程序$ Scriptjs将代码包含在组件中，则有另一种方法。

通过npm安装

npm install scriptjs

导入您的组件

import $Scriptjs from 'scriptjs

将脚本加载到已挂接的钩子中（假设组件中有一个名为initMap的方法）

...
mounted () {
  $Scriptjs('https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}', () => {
      this.initMap()
}
...

Answer 5

使用Google Map回调函数后的初始Vue部分。

function initMap(){	
	var app = new Vue({
		el:"#app",
		data:{
			name:"Niklesh Raut",
			map:"",
			mapOptions:{}
		},
		mounted(){
			this.initMap();
		},
		methods:{
			initMap: function(){
				this.mapOptions = {
					center: new google.maps.LatLng(21.139808079490507, 79.07690763473511),
					zoom: 10,
					mapTypeId: 'roadmap'
				}
				this.map = new google.maps.Map(document.getElementById("map"), this.mapOptions);
			}
		}
	});
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
#content {
    width: 100%;
    /*padding: 20px;*/
    min-height: 100vh;
    transition: all 0.3s;
}
.map{
    height: 100%;
    width:100%;
}

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUFmbwJMBHU_paeMfVO7oqPC1IJEtbJUU&callback=initMap"></script>	
</head>	

<div id="app" class="wrapper">
	<div id="content">
		Name : {{name}}
		<div id="map" class="map"></div>
	</div>
</div>

Jsfiddle Link

Answer 6

将Google Maps集成到Vue的最佳和简单方法是使用npm的库。您需要使用vue-google-maps

npm install vue2-google-maps

然后

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',

  },


})

下面是简单的粘贴代码：

<GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>


</GmapMap>

在vue.js中集成Google地图

6 个答案: