在 vue.js 中集成谷歌地图 [英] Integrating Google Maps in vue.js

问题描述

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

I've been trying to initialize a Google map on my vue.js project while including the script :

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

问题是我的 .vue 文件看起来像这样:

The problem is that my .vue files look like that :

<template>
  ...
</template>

<script>
  ...
</script>

而且我不能在我的 vue 文件中包含一个以上的脚本标签，我可以在通过 index.html 的同时显示地图，但我真的不想把 js 放在 index.html 上，+我不能将脚本回调指向 vue 方法.

And I can't include more than one script tag in my vue file, I can show the map while passing by the index.html but I dont really want to put js on the index.html, + I can't point the script callback on a vue method.

你们对如何使用 .vue 文件显示该地图有一些想法吗?我确实使用了 vue2-google-maps，但我想使用原始的 google 地图.

Do you guys have some ideas on how to show up that map using a .vue file ? I did use vue2-google-maps but I'd like to use the original google map.

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

I have a fiddle which is doing something ok : https://jsfiddle.net/okubdoqa/ without using a callback in the script tag, but it doesnt work for me ... Thanks

推荐答案

我建议使用 npmgoogle-maps 而不是在 index.html 中添加脚本.您可能不需要在每个页面中都调用 google-maps API，我认为最好正确使用 Webpack.您可以使用 npm install google-maps

I'd suggest using npm google-maps instead of adding a script in index.html. You might not need to call google-maps API in every pages, and I'd say it's better to use Webpack properly. You can use 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
    })
  })
}

这篇关于在 vue.js 中集成谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！