使用Google Maps的Vue.js单页组件中的“模块未找到"错误 [英] Module Not Found error in Vue.js single page component using google maps

问题描述

我正在尝试将Google Maps API中的Google Map插入我的Vue.js应用程序中.我已经检索了生成的API密钥，并试图显示地图.当我运行该应用程序时，Atom会引发找不到模块"错误消息，并且浏览器显示:Can't resolve 'https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap' in 'C:\Atom Projects\Project\client\src\components'我在做什么错吗?

I'm attempting to pull in a Google Map from the Google Maps API into my Vue.js application. I have retrieved my generated API key and I am trying to display the map. When I run the app, Atom throws a Module not found error message and the browser displays: Can't resolve 'https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap' in 'C:\Atom Projects\Project\client\src\components' Any idea what I'm doing wrong?

MyComponent.vue

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

<script>
  function initMap () {
    var options = {
      zoom: 8,
      center:{lat:39.9612,lng:-82.9988}
    }

    var map = new google.maps.Map(document.getElementById('map'), options);
  }
</script>

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

<style>
  #map{
    height: 400px;
    width: 100%;
  }
</style>

浏览器完全错误

./src/components/MyComponent.vue
Module not found: Error: Can't resolve 'https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap' in 'C:\Atom Projects\MyProject\client\src\components'
 @ ./src/components/MyComponent.vue 8:0-131 9:0-144
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

推荐答案

您不能将外部<script>添加到这样的单个文件组件中.

You can't add external <script>s to single file components like that.

处理像您这样的案例的常用方法是使用许多集成了vue和google地图的库之一.

The usual approach to cases like yours is to use one of the many libs that integrate vue and google maps.

其中一些库提供了新的自定义元素供您使用:

Some of these libs make available new custom elements for you to use:

例如，
• xkjyeah/vue-google-maps 创建;
• Akryum/vue-googlemaps 创建<googlemaps-map>;
• GuillaumeLeclerc/vue-google-maps 创建<map>.

• xkjyeah/vue-google-maps, for instance, creates the <gmap-map>;
• Akryum/vue-googlemaps create the <googlemaps-map>;
• GuillaumeLeclerc/vue-google-maps creates the <map>.

所有这些都具有设置键和实例化地图的简单细节.有关示例和用法，请参见他们的页面.

All of them have simple details to setting the key and instantiating maps. Refer to their page for examples and usage.

另一个采用更底层方法的方法是 Js-GoogleMapsLoader .我并不是说这个要比其他更好-总体而言，从长远来看，特定于vue的那些可能会为您提供更轻松的集成-，但是由于它没有Vue的示例，因此您可以按照以下方式进行操作使用它:

Another one that takes a more low-level approach is Js-GoogleMapsLoader. I'm not saying this one is better than the others -- overall those that are specifics to vue probably will give you an easier integration in the long run --, but since it does not have an example with Vue, here's how you could use it:

• 运行npm install --save google-maps

• 将 MyComponent.vue 更改为:

• run npm install --save google-maps

• change MyComponent.vue to:

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

<script>
import GoogleMapsLoader from 'google-maps'

export default {

  mounted: function () {
    GoogleMapsLoader.KEY = 'qwertyuiopasdfghjklzxcvbnm';
    GoogleMapsLoader.load(function(google) {
      var options = {
        zoom: 8,
        center:{ lat: 39.9612, lng: -82.9988 }
      }

      var map = new google.maps.Map(document.getElementById('map'), options);
    });
  }
}
</script>

<style>
  #map{
    height: 400px;
    width: 100%;
  }
</style>

并且上面的任何选项都不需要附加的<script>标记.

And none of the options above need the additional <script> tag.

这篇关于使用Google Maps的Vue.js单页组件中的“模块未找到"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！