Интеграция Google Maps в vue.Яш

Я пытался инициализировать карту Google на моем 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, я могу показать карту, проходя мимо индекса.html, но я действительно не хочу ставить js в индекс.html, + я не могу указать обратный вызов скрипта на метод vue.

у вас, ребята, есть идеи о том, как показать это карты с использованием .файл vue ? Я использовал vue2-google-maps, но я хотел бы использовать оригинальную карту google.

у меня есть скрипка, которая делает что-то хорошо:https://jsfiddle.net/okubdoqa/ без использования обратного вызова в теге скрипта, но это не работает для меня ... Спасибо

10
google-maps javascript vue.js

5 ответов

это немного суетливо, чтобы заставить это работать без использования библиотеки, и, вероятно, есть более чистые способы, но вы можете просто импортировать библиотеку и использовать ее в своих компонентах, если вы хотите встать и работать.

во-первых, не используйте defer & async опции <script> тег. Загрузите его в index.html:

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

затем в компоненте вы можете получить доступ к глобальному google и передайте ему элемент После настройки компонента. Например, используя setup from в Vuejs командной строки:

<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>
9

Я бы предложил использовать npm google-maps вместо добавления скрипта в индекс.формат 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
    })
  })
}
13

Я искал другую проблему и нашел этот, есть еще один способ, которым вы могли бы достичь этого, не добавляя его в 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, который разрешит обратный вызов, инициированный скриптом Google (который мы динамически добавляли к телу ). После разрешения обещания вы можете получить доступ к объекту карты в своем компоненте.

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()
}
...
2

начальная часть vue после использования функции обратного вызова Google map.

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

0